import type { SeatsFiltersProps } from '../../seat.type';

export function SeatsFilters({
  searchQuery,
  districtFilter,
  divisionFilter,
  districts,
  onSearchChange,
  onDistrictChange,
  onDivisionChange,
  onReset,
}: SeatsFiltersProps) {
  return (
    <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-4 sm:p-6 mb-8 sm:mb-12 sticky top-20 z-30">
      <div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
        <div className="md:col-span-5 relative">
          <span className="absolute left-4 top-1/2 -translate-y-1/2 material-symbols-outlined text-gray-400">
            search
          </span>
          <input
            type="text"
            value={searchQuery}
            onChange={(e) => onSearchChange(e.target.value)}
            placeholder="আসন খুঁজুন (যেমন: ঢাকা-১০)"
            className="w-full pl-12 pr-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 outline-none transition text-sm"
          />
        </div>

        <div className="md:col-span-3">
          <select
            value={districtFilter}
            onChange={(e) => onDistrictChange(e.target.value)}
            className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 outline-none transition text-sm bg-white cursor-pointer"
          >
            <option value="">সকল জেলা</option>
            {districts.map((district) => (
              <option key={district} value={district}>
                {district}
              </option>
            ))}
          </select>
        </div>

        <div className="md:col-span-3">
          <select
            value={divisionFilter}
            onChange={(e) => onDivisionChange(e.target.value)}
            className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-100 outline-none transition text-sm bg-white cursor-pointer"
          >
            <option value="">সকল বিভাগ</option>
            <option value="Dhaka">ঢাকা</option>
            <option value="Chittagong">চট্টগ্রাম</option>
            <option value="Sylhet">সিলেট</option>
            <option value="Khulna">খুলনা</option>
            <option value="Rajshahi">রাজশাহী</option>
            <option value="Barisal">বরিশাল</option>
            <option value="Rangpur">রংপুর</option>
            <option value="Mymensingh">ময়মনসিংহ</option>
          </select>
        </div>

        <div className="md:col-span-1 flex justify-end">
          <button
            onClick={onReset}
            className="p-3 rounded-xl bg-gray-100 text-gray-600 hover:bg-gray-200 transition"
            title="রিসেট করুন"
          >
            <span className="material-symbols-outlined text-xl">restart_alt</span>
          </button>
        </div>
      </div>
    </div>
  );
}