"use client";
import MobileSelectAtom from "@/components/atoms/MobileSelectAtom";
import { useState } from "react";
import {
  locationOptions,
  propertyStatusOptions,
  propertyTypeOptions,
  unitSizeOptions,
} from "./constants";

interface PropertyFilterProps {
  isExpanded: boolean;
}

const PropertyFilter = ({ isExpanded }: PropertyFilterProps) => {
  const [searchFormData, setSearchFormData] = useState({
    propertyType: "all",
    location: "all",
    size: "all",
    status: "all",
  });

  const handleChange = (name: string, value: string) => {
    setSearchFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    console.log("Search with:", searchFormData);
  };

  return (
    <div className="w-full mx-auto">
      {/* Filter Form */}
      <form
        onSubmit={handleSearch}
        className={`space-y-0 transition-all duration-300 overflow-hidden ${
          isExpanded
            ? "max-h-[2000px] opacity-100 mt-4"
            : "max-h-0 opacity-0 lg:max-h-none lg:opacity-100 lg:mt-0"
        }`}
      >
        {/* Property Type */}
        <div className="py-6 border-b border-gray-200">
          <label className="block text-xs uppercase tracking-widest text-gray-400 mb-3">
            Property Type
          </label>
          <MobileSelectAtom
            label=""
            name="propertyType"
            value={searchFormData.propertyType}
            onChange={handleChange}
            options={propertyTypeOptions}
            placeholder="All types"
          />
        </div>

        {/* Location */}
        <div className="py-6 border-b border-gray-200">
          <label className="block text-xs uppercase tracking-widest text-gray-400 mb-3">
            Location
          </label>
          <MobileSelectAtom
            label=""
            name="location"
            value={searchFormData.location}
            onChange={handleChange}
            options={locationOptions}
            placeholder="All locations"
          />
        </div>

        {/* Unit Size */}
        <div className="py-6 border-b border-gray-200">
          <label className="block text-xs uppercase tracking-widest text-gray-400 mb-3">
            Unit Size
          </label>
          <MobileSelectAtom
            label=""
            name="size"
            value={searchFormData.size}
            onChange={handleChange}
            options={unitSizeOptions}
            placeholder="All sizes"
          />
        </div>

        {/* Property Status */}
        <div className="py-6 border-b border-gray-200">
          <label className="block text-xs uppercase tracking-widest text-gray-400 mb-3">
            Property Status
          </label>
          <MobileSelectAtom
            label=""
            name="status"
            value={searchFormData.status}
            onChange={handleChange}
            options={propertyStatusOptions}
            placeholder="All status"
          />
        </div>

        {/* Search Button */}
        <div className="pt-8">
          <button
            type="submit"
            className="w-full py-4 bg-transparent border border-gray-900 text-gray-900 text-sm uppercase tracking-widest font-medium transition-all duration-300 hover:bg-gray-900 hover:text-white"
          >
            Search Properties
          </button>
        </div>
      </form>
    </div>
  );
};

export default PropertyFilter;