"use client"
import { useState } from "react";
import Header from "@/components/layout/header";
import HeroCard from "@/components/main-page/heroCard";
import { PropertyCard } from "@/types/property-card";
import useIsMobile from "@/hooks/useIsMobile";

interface HeroProps {
  properties?: PropertyCard[];
}

const HERO_TITLE = (
  <>
    منصة أمــتار <br /> للشراء و الايجار و البيع
  </>
);

const HERO_DESCRIPTION =
  "ابحث وقارن بين أكثر من 15000+ عقار من بين 800+ كمبوند أو اعرض عقارك للبيع";

export default function Hero({ properties = [] }: HeroProps) {
  const [openMenu, setOpenMenu] = useState(false);
  const isMobile = useIsMobile();

  return (
    <section
      className="md:h-140 md:flex flex-col justify-center overflow-hidden md:rounded-3xl rounded-none md:m-5 m-0 md:bg-[url('/main-page/hero.png')] md:bg-center md:bg-cover"
    >
      <Header menuOpen={openMenu} setMenuOpen={setOpenMenu} />
      {isMobile ? <MobileHero /> : <DesktopHero />}
      {/* <div className="flex gap-5 lg:px-20 md:px-10 px-5 pb-20 shrink-0 overflow-x-auto" style={{ scrollbarWidth: "none" }}>
        {properties.map((item) => (
          <HeroCard
            key={item.id}
            title={item.title}
            description={item.subtitle}
            beach={item.bedrooms}
            pool={item.bathrooms}
            area={item.area}
            src={item.image}
            className="shrink-0"
            blurEffect={!openMenu}
          />
        ))}
      </div> */}
    </section>
  );
}

const DesktopHero = () => (
  <div className="text-white pt-[190px] flex flex-col justify-center items-center gap-4 pb-28">
    <h1 className="font-semibold lg:text-7xl md:text-5xl text-3xl text-center">
      {HERO_TITLE}
    </h1>
    <p className="lg:text-xl md:text-lg text-base text-center">
      {HERO_DESCRIPTION}
    </p>
  </div>
)

const MobileHero = () => {
  return (
    <>
      <div className="h-60 bg-[url('/main-page/hero.png')] w-full bg-cover bg-center">
        <h1 className="font-semibold lg:text-7xl md:text-5xl text-3xl text-center flex justify-center items-center h-full text-white">
          {HERO_TITLE}
        </h1>
      </div>
      <div className="mb-10 -mt-6 bg-white rounded-3xl">
        <p className="sm:mb-0 lg:text-xl md:text-lg text-base font-semibold p-5">
          {HERO_DESCRIPTION}
        </p>

        <img src='/main-page/hero-bottom.jpeg' alt="hero bottom" />
        <img src='/main-page/cities.jpeg' alt="cities" />
      </div>
    </>
  )
}