'use client';
import React from 'react';
import { Button } from '@/components/ui/button';
import { Plus } from 'lucide-react';

interface TopHeaderProps {
  title?: string;
  itemCount?: number;
  onAddNew?: () => void;
  addButtonText?: string;
  toolbar?: React.ReactNode;
  tableTools?: React.ReactNode;
}

const TopHeader = ({
  title,
  itemCount,
  onAddNew,
  addButtonText = 'Add New',
  toolbar,
  tableTools,
}: TopHeaderProps) => {
  return (
    <div className="space-y-3">
      {(title || onAddNew) && (
        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
          <div className="min-w-0">
            {title ? <h2 className="text-lg font-semibold">{title}</h2> : null}
            <p className="text-sm text-muted-foreground">
              Total {itemCount ?? 0}
            </p>
          </div>
          {onAddNew ? (
            <Button onClick={onAddNew} size="sm" className="w-fit">
              <Plus className="size-4" />
              {addButtonText}
            </Button>
          ) : null}
        </div>
      )}

      {(toolbar || tableTools) && (
        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
          {toolbar ? (
            <div className="min-w-0 flex-1 **:data-[slot=input-group]:border-border [&_[data-slot=input-group]]:bg-background [&_[data-slot=input-group]]:shadow-none [&_[data-slot=select-trigger]]:border-border [&_[data-slot=select-trigger]]:bg-background [&_[data-slot=select-trigger]]:shadow-none">
              {toolbar}
            </div>
          ) : null}
          {tableTools ? (
            <div className="flex shrink-0 justify-end **:data-[slot=button]:shadow-none">
              {tableTools}
            </div>
          ) : null}
        </div>
      )}
    </div>
  );
};

export default TopHeader;