"use client";

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

interface FilterState {
  type: string;
  location: string;
  size: string;
  status: string;
}

interface MobileFilterPanelProps {
  filters: FilterState;
  onFilterChange: (name: string, value: string) => void;
  isExpanded: boolean;
  locationOptions?: { value: string; label: string }[];
}

const MobileFilterPanel = ({
  filters,
  onFilterChange,
  isExpanded,
  locationOptions = [],
}: MobileFilterPanelProps) => {
  // Use dynamic location options if provided, otherwise fall back to constants
  const effectiveLocationOptions = locationOptions.length > 1 
    ? locationOptions 
    : locationOptions;
  return (
    <div className="w-full mx-auto xl:hidden">
      {/* Filter Form */}
      <form
        className={`space-y-0 transition-all duration-300 ${
          isExpanded
            ? "max-h-[2000px] opacity-100 mt-4 overflow-visible"
            : "max-h-0 opacity-0 overflow-hidden"
        }`}
      >
        {/* 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="type"
            value={filters.type}
            onChange={onFilterChange}
            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={filters.location}
            onChange={onFilterChange}
            options={effectiveLocationOptions.length > 1 ? effectiveLocationOptions : 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={filters.size}
            onChange={onFilterChange}
            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={filters.status}
            onChange={onFilterChange}
            options={propertyStatusOptions}
            placeholder="All status"
          />
        </div>

        {/* Search Button - Removed Link, filters update URL automatically */}
        <div className="pt-8">
          <button
            type="button"
            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 MobileFilterPanel;