import { Search, X } from 'lucide-react';

export function SearchBar({
  value,
  onChange,
}: {
  value: string;
  onChange: (v: string) => void;
}) {
  return (
    <div className="relative flex-1 bg-white/60 backdrop-blur-md border border-gray-200 rounded-xl focus-within:border-yellow-400 focus-within:ring-1 focus-within:ring-yellow-400 transition-all shadow-sm">
      <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder="Cari nama atau email..."
        className="w-full pl-11 pr-10 py-3 bg-transparent text-gray-900 text-sm font-medium placeholder:text-gray-400 focus:outline-none tracking-wide"
      />
      {value && (
        <button
          onClick={() => onChange('')}
          className="absolute right-3 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-yellow-600 transition-colors rounded-full hover:bg-white"
        >
          <X className="w-4 h-4" />
        </button>
      )}
    </div>
  );
}