import { Plus } from "lucide-react"
import Link from "next/link"

import Search from "@/components/common/search"
import { Button } from "@/components/ui/button"

interface PageHeaderProps {
  title?: string
  link?: string
  search?: string
  data: any[]
}

export default function PageHeader({
  title,
  link,
  search,
  data,
}: PageHeaderProps) {
  return (
    <header className="mb-4 flex w-full flex-col gap-4 md:flex-row">
      <div className="flex items-center gap-4">
        <h1 className="text-2xl font-bold">{title}</h1>
        <Search hidden={data.length === 0 && !search} />
      </div>
      {link && (
        <div className="justify-end md:ml-auto md:flex">
          <Link href={link} passHref>
            <Button className="btn btn-primary">
              Add {title} <Plus />
            </Button>
          </Link>
        </div>
      )}
    </header>
  )
}
