"use client";

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

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

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

export default function BlogToolbar({
  search,
  setSearch,
  status,
  setStatus,
  category,
  setCategory,
}: Props) {
  return (
    <div className="mb-6 flex flex-col gap-4 rounded-2xl border bg-white p-6 lg:flex-row lg:items-center lg:justify-between">

      {/* Search */}

      <input
        type="text"
        placeholder="Search blogs..."
        value={search}
        onChange={(e) =>
          setSearch(e.target.value)
        }
        className="w-full rounded-xl border px-4 py-3 lg:max-w-sm"
      />

      <div className="flex flex-wrap gap-3">

        {/* Status */}

        <select
          value={status}
          onChange={(e) =>
            setStatus(e.target.value)
          }
          className="rounded-xl border px-4 py-3"
        >
          <option value="">
            All Status
          </option>

          <option value="Draft">
            Draft
          </option>

          <option value="Published">
            Published
          </option>

          <option value="Archived">
            Archived
          </option>

        </select>

        {/* Category */}

        <select
          value={category}
          onChange={(e) =>
            setCategory(e.target.value)
          }
          className="rounded-xl border px-4 py-3"
        >
          <option value="">
            All Categories
          </option>

          <option value="Wedding">
            Wedding
          </option>

          <option value="Corporate">
            Corporate
          </option>

          <option value="Stay">
            Stay
          </option>

          <option value="Photoshoot">
            Photoshoot
          </option>

          <option value="Events">
            Events
          </option>

          <option value="Awards">
            Awards
          </option>

        </select>

      </div>

    </div>
  );
}