"use client";

import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import Link from "next/link";
import type { ReactNode } from "react";

interface TenderPageHeaderProps {
  onCreateClick: () => void;
  projectContent: ReactNode;
  categoryContent: ReactNode;
}

export function TenderPageHeader({
  onCreateClick,
  projectContent,
  categoryContent,
}: TenderPageHeaderProps) {
  return (
    <Tabs defaultValue="project">
      <TabsList>
        <TabsTrigger value="project">Project Tenders</TabsTrigger>
        <TabsTrigger value="category">Category Tenders</TabsTrigger>
      </TabsList>

      <TabsContent value="project" className="space-y-6">
        <div className="flex items-center justify-between">
          <h1 className="text-3xl font-bold">Tenders</h1>
          <div className="flex gap-2">
            <Button variant="outline" onClick={onCreateClick}>
              Create Ad-hoc Tender
            </Button>
            <Link href="/boq">
              <Button className="bg-primary text-primary-foreground hover:bg-primary/90">
                Create Tender (via BOQ)
              </Button>
            </Link>
          </div>
        </div>
        {projectContent}
      </TabsContent>

      <TabsContent value="category">
        {categoryContent}
      </TabsContent>
    </Tabs>
  );
}