SweetHome/app/components/home/HeroSearch.js

"use client";
import { useState } from "react";
import { motion } from "framer-motion";
import { useTranslation } from "react-i18next";
import { Search, MapPin, Home, DollarSign } from "lucide-react";
import { useFilterOptions } from "@/app/hooks/UseFilterOfHeroSearch";
import ShowLoginDialog from "./showLoginDialog";
import FilterSelect from "./FilterSelect";
export default function HeroSearch({ onSearch }) {
  const { t } = useTranslation();
  const { cities, identityTypes, ownerSources, priceRanges, propertyTypes, rentPeriods } = useFilterOptions();
  const [activeTab, setActiveTab] = useState("buy");
  const [filters, setFilters] = useState({
    city: "all",
    propertyType: "all",
    priceRange: "all",
    identityType: "syrian",
    ownerSource: "all",
    rentPeriod: "all",
    availableToday: false,
  });
  const [showLoginDialog, setShowLoginDialog] = useState(false);
  const handleTabClick = (tab) => {
    setActiveTab(tab);
  };
  const handleSearch = () => {
    onSearch({
      ...filters,
      mode: activeTab,
      city: filters.city || "all",
      propertyType: filters.propertyType || "all",
      priceRange: filters.priceRange || "all",
      ownerSource: filters.ownerSource || "all",
      rentPeriod: filters.rentPeriod || "all",
    });
  };

  return (
    <>
      <motion.div
        className="bg-white/10 backdrop-blur-lg rounded-2xl p-6 sm:p-8 border border-white/20 shadow-2xl"
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, delay: 0.5 }}
      >
        <div className="flex flex-wrap gap-2 mb-8">
          {["rent", "buy", "sell"].map((tab) => {
            const isActive = activeTab === tab;

            return (
              <button
                key={tab}
                onClick={() => handleTabClick(tab)}
                className={`relative px-5 py-2.5 rounded-lg font-medium text-sm transition-colors duration-200 outline-none select-none ${isActive ? "text-white" : "text-amber-50 hover:text-white"}`}
              >
                {isActive && <motion.div layoutId="activeTabBackground" className="absolute inset-0 bg-amber-500 rounded-lg shadow-md" transition={{ type: "spring", stiffness: 500, damping: 35 }} />}
                <span className="relative z-10">{t(`${tab}Tab`)}</span>
              </button>
            );
          })}
        </div>
        {/* city */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
          <FilterSelect icon={<MapPin className="w-4 h-4" />} value={filters.city} onChange={(e) => setFilters({ ...filters, city: e.target.value })} option={cities} label={t(t("cityStreetLabel"))} />
          {activeTab === "rent" && (
            <FilterSelect
              icon={<Home className="w-4 h-4" />}
              value={filters.propertyType}
              onChange={(e) => setFilters({ ...filters, city: e.target.value })}
              option={propertyTypes}
              label={t("rentTypeLabel")}
            />
          )}
          {/* price */}
          <FilterSelect
            icon={<DollarSign className="w-4 h-4" />}
            value={filters.priceRange}
            onChange={(e) => setFilters({ ...filters, priceRange: e.target.value })}
            option={priceRanges}
            label={t("priceLabel")}
          />
          {/* type */}
          <FilterSelect value={filters.identityType} onChange={(e) => setFilters({ ...filters, identityType: e.target.value })} option={identityTypes} label={t("identityTypeLabel")} />
        </div>
        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
          {/* owener */}
          <FilterSelect value={filters.ownerSource} onChange={(e) => setFilters({ ...filters, ownerSource: e.target.value })} option={ownerSources} label={t("ownerSourceLabel")} />
          {activeTab === "rent" && <FilterSelect value={filters.rentPeriod} onChange={(e) => setFilters({ ...filters, rentPeriod: e.target.value })} option={rentPeriods} label={t("rentTypeLabel")} />}
          <div className={`${activeTab === "rent" ? "md:col-span-2" : "md:col-span-3"} flex flex-col justify-between p-4 rounded-2xl border border-dashed border-white/30 bg-white/5`}>
            {/* checkbox */}
            <label className="mt-4 flex items-center gap-3 text-amber-50 text-sm">
              <input
                type="checkbox"
                checked={filters.availableToday}
                onChange={(e) => setFilters({ ...filters, availableToday: e.target.checked })}
                className="w-5 h-5 text-amber-500 rounded border-gray-300 bg-white"
              />
              <span className="font-medium">{t("availableToday")}</span>
            </label>
          </div>
        </div>
        <div className="mt-6">
          <motion.button
            onClick={handleSearch}
            className="w-full bg-amber-500 hover:bg-amber-600 text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 flex items-center justify-center text-base gap-3 shadow-lg hover:shadow-xl"
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
          >
            <Search className="w-5 h-5" />
            {t("searchButton")}
          </motion.button>
        </div>
      </motion.div>
      {showLoginDialog && !isAuthenticated && <ShowLoginDialog setShowLoginDialog={setShowLoginDialog} />}
    </>
  );
}