import { Input } from '@/components/ui/input';
import { AdminSearchHeaderProps } from '@/src/types/admin';

export function AdminSearchHeader({
  title,
  count,
  searchTerm,
  onSearchChange,
  placeholder = 'Search...',
}: AdminSearchHeaderProps) {
  return (
    <div className='flex flex-col md:flex-row gap-4 justify-between items-start md:items-center'>
      <div className='flex flex-col sm:flex-row gap-4 w-full'>
        <Input
          placeholder={placeholder}
          className='max-w-md w-full border-neutral-800 rounded-md'
          value={searchTerm}
          onChange={(e) => onSearchChange(e.target.value)}
        />
      </div>
      <div className='text-neutral-800 text-sm whitespace-nowrap'>
        Total {title}: <span className='font-semibold'>{count}</span>
      </div>
    </div>
  );
}
