import React from "react";

const Filters = ({
  statusOptions = [],
  provinceOptions = [],
  cityOptions = [],
  photographyModelOptions = [],
  blockStatusOptions = [],
  onFilterChange = () => {},
}) => {
  const [filters, setFilters] = React.useState({
    startDate: "",
    endDate: "",
    status: "",
    province: "",
    city: "",
    photographyModel: "",
    blockStatus: "",
  });

  const handleFilterChange = (name, value) => {
    const newFilters = { ...filters, [name]: value };
    if (name === "province") {
      newFilters.city = ""; // ریست شهر هنگام تغییر استان
    }
    setFilters(newFilters);
    onFilterChange(newFilters);
  };

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      <div>
        <label className="block text-sm font-medium mb-1 dark:text-gray-200">وضعیت مدارک</label>
        <select
          value={filters.status}
          onChange={(e) => handleFilterChange("status", e.target.value)}
          className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:bg-gray-700 dark:text-white"
        >
          {statusOptions?.map((option) => (
            <option key={option.key} value={option.key}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1 dark:text-gray-200">استان</label>
        <select
          value={filters.province}
          onChange={(e) => handleFilterChange("province", e.target.value)}
          className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:bg-gray-700 dark:text-white"
        >
          {provinceOptions?.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1 dark:text-gray-200">شهر</label>
        <select
          value={filters.city}
          onChange={(e) => handleFilterChange("city", e.target.value)}
          className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:bg-gray-700 dark:text-white"
        >
          {cityOptions?.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1 dark:text-gray-200">مدل زیبایی عکاسی</label>
        <select
          value={filters.photographyModel}
          onChange={(e) => handleFilterChange("photographyModel", e.target.value)}
          className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:bg-gray-700 dark:text-white"
        >
          {photographyModelOptions?.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1 dark:text-gray-200">وضعیت کاربر</label>
        <select
          value={filters.blockStatus}
          onChange={(e) => handleFilterChange("blockStatus", e.target.value)}
          className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:bg-gray-700 dark:text-white"
        >
          {blockStatusOptions?.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
      <div>
        <label className="block text-sm font-medium mb-1 dark:text-gray-200">از تاریخ</label>
        <input
          type="text"
          placeholder="مثال: 1404-07-04"
          value={filters.startDate}
          onChange={(e) => handleFilterChange("startDate", e.target.value)}
          className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:bg-gray-700 dark:text-white"
        />
      </div>
      <div>
        <label className="block text-sm font-medium mb-1 dark:text-gray-200">تا تاریخ</label>
        <input
          type="text"
          placeholder="مثال: 1404-07-04"
          value={filters.endDate}
          onChange={(e) => handleFilterChange("endDate", e.target.value)}
          className="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-teal-500 dark:bg-gray-700 dark:text-white"
        />
      </div>
    </div>
  );
};

export default Filters;