import React from "react";
import Link from "next/link";
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface EntityOverviewHeaderProps {
  title: string;
  description?: string;
  addHref?: string;
  onAddClick?: () => void;
  addLabel?: string;
  className?: string;
  children?: React.ReactNode;
}

/**
 * EntityOverviewHeader provides a standardized header for entity overview pages.
 * It includes a title, optional description, and a primary action button (usually "Add").
 * It also supports custom children for additional actions or filters.
 */
export function EntityOverviewHeader({
  title,
  description,
  addHref,
  onAddClick,
  addLabel = "Hinzufügen",
  className,
  children,
}: EntityOverviewHeaderProps) {
  return (
    <div className={cn("flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mb-8", className)}>
      <div>
        <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
        {description && <p className="text-muted-foreground text-sm">{description}</p>}
      </div>
      <div className="flex items-center gap-3">
        {children}
        {addHref ? (
          <Button asChild className="font-semibold text-xs shadow-sm">
            <Link href={addHref}>
              <Plus className="h-3.5 w-3.5 mr-2" />
              {addLabel}
            </Link>
          </Button>
        ) : onAddClick ? (
          <Button onClick={onAddClick} className="font-semibold text-xs shadow-sm">
            <Plus className="h-3.5 w-3.5 mr-2" />
            {addLabel}
          </Button>
        ) : null}
      </div>
    </div>
  );
}