'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-4">
      {(title || onAddNew) && (
        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
          <div>
            {title ? <h2>{title}</h2> : null}
            <p className="text-muted-foreground">Total {itemCount ?? 0}</p>
          </div>
          {onAddNew ? (
            <Button onClick={onAddNew}>
              <Plus className="mr-2 size-4" />
              {addButtonText}
            </Button>
          ) : null}
        </div>
      )}
      {(toolbar || tableTools) && (
        <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
          <div className="min-w-0 flex-1">{toolbar}</div>
          {tableTools ? (
            <div className="flex shrink-0 justify-end">{tableTools}</div>
          ) : null}
        </div>
      )}
    </div>
  );
};

export default TopHeader;