interface OrderSearchProps {
  query: string;
  onQueryChange: (value: string) => void;
}

export function OrderSearch({ query, onQueryChange }: OrderSearchProps) {
  return (
    <label className="block rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
      <span className="mb-2 block text-sm font-medium text-slate-700">Search orders</span>
      <input
        className="w-full rounded-lg border border-slate-300 px-3 py-2 outline-none ring-0 transition focus:border-blue-500"
        value={query}
        onChange={(event) => onQueryChange(event.target.value)}
        placeholder="Search by order number, customer name, or email"
      />
    </label>
  );
}