"use client";

type Props = {
  search: string;
  setSearch: (value: string) => void;

  status: string;
  setStatus: (value: string) => void;

  category: string;
  setCategory: (value: string) => void;

  date: string;
  setDate: (value: string) => void;
};

export default function EnquiryToolbar({
  search,
  setSearch,
  status,
  setStatus,
  category,
  setCategory,
  date,
  setDate,
}: Props) {
  return (
    <div className="mb-6 grid gap-4 md:grid-cols-4">

      {/* Search */}
      <input
        type="text"
        placeholder="Search name, email or mobile..."
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        className="rounded-lg border px-4 py-2"
      />

      {/* Status */}
      <select
        value={status}
        onChange={(e) => setStatus(e.target.value)}
        className="rounded-lg border px-4 py-2"
      >
        <option value="">All Status</option>
        <option value="New">New</option>
        <option value="Contacted">Contacted</option>
        <option value="Closed">Closed</option>
      </select>

      {/* Category */}
      <select
        value={category}
        onChange={(e) => setCategory(e.target.value)}
        className="rounded-lg border px-4 py-2"
      >
        <option value="">All Categories</option>
        <option value="Wedding">Wedding</option>
        <option value="Corporate Event">
          Corporate Event
        </option>
        <option value="Stay">Stay</option>
        <option value="Social Event">
          Social Event
        </option>
      </select>

      {/* Date */}
      <input
        type="date"
        value={date}
        onChange={(e) => setDate(e.target.value)}
        className="rounded-lg border px-4 py-2"
      />

    </div>
  );
}