"use client";

import LuxurySearchFilters from "@/sections/property-search/LuxurySearchFilters";
import LuxurySearchResults from "@/sections/property-search/LuxurySearchResults";
import { useState, useCallback, useEffect, useRef } from "react";
import gsap from "gsap";

export interface SearchFiltersState {
    propertyType: string;
    location: string;
    size: string;
    status: string;
    searchQuery: string;
}

export default function PropertySearchPage() {
    const [filters, setFilters] = useState<SearchFiltersState>({
        propertyType: "all",
        location: "all",
        size: "all",
        status: "all",
        searchQuery: "",
    });

    const heroRef = useRef<HTMLElement>(null);

    const handleFilterChange = useCallback((newFilters: SearchFiltersState) => {
        setFilters(newFilters);
    }, []);

    useEffect(() => {
        const ctx = gsap.context(() => {
            gsap.fromTo(
                ".hero-content",
                { opacity: 0, y: 30 },
                { opacity: 1, y: 0, duration: 0.8, ease: "power2.out", delay: 0.2 }
            );
            gsap.fromTo(
                ".hero-decoration",
                { scaleX: 0 },
                { scaleX: 1, duration: 0.6, ease: "power2.out", delay: 0.5 }
            );
        }, heroRef);

        return () => ctx.revert();
    }, []);

    return (
        <div className="min-h-screen bg-[#F5F5F5]">
            {/* Filters Section */}
            <LuxurySearchFilters filters={filters} onFilterChange={handleFilterChange} />

            {/* Results Section */}
            <LuxurySearchResults filters={filters} />
        </div>
    );
}