"use client";

import { useState } from "react";
import { PropertyCard } from "./propertyCard";
import HorizontalAutoScroll from "../HorizontalAutoScroll";
import SegmentedControl from "../common/SegmentedControl";

interface PropertySlidesProps {
  properties: PropertyCard[];
}

export function PropertySlides({ properties }: PropertySlidesProps) {
  const [activeTab, setActiveTab] = useState("sale");

  // Helper function to limit properties: 3 premium + 13 non-premium
  const limitProperties = (props: PropertyCard[]) => {
    const premium = props.filter(p => p.badge === 'مميز').slice(0, 3);
    const nonPremium = props.filter(p => p.badge !== 'مميز').slice(0, 13);
    return [...premium, ...nonPremium];
  };

  const saleProperties = limitProperties(
    properties.filter(p => p.section?.toLowerCase().includes('sale'))
  );
  const rentProperties = limitProperties(
    properties.filter(p => p.section?.toLowerCase().includes('rent'))
  );

  const displayedProperties = activeTab === "sale" ? saleProperties : rentProperties;

  return (
    <div className="w-full overflow-x-hidden">
      <div className="flex w-full flex-col gap-4 py-6 lg:pr-20 md:pr-10 pr-5">
        {/* <div className="flex justify-start w-full">
          <SegmentedControl
            options={[
              { id: "sale", label: "بيع" },
              { id: "rent", label: "إيجار" },
            ]}
            value={activeTab}
            onChange={setActiveTab}
            className="!my-0 !justify-start w-fit"
          />
        </div> */}

        <HorizontalAutoScroll key={activeTab} classNames="flex overflow-x-auto pb-4 -mx-1 px-2 snap-x snap-mandatory no-scrollbar">
          <div className="flex">
            {displayedProperties.length > 0 ? (
              displayedProperties.map((card) => (
                <div
                  key={card.id}
                  className="flex-shrink-0 px-1 md:px-2 lg:px-4"
                >
                  <PropertyCard
                   {...card} />
                </div>
              ))
            ) : (
              <div className="py-10 text-center w-full text-gray-400">
                {activeTab === "sale" ? "لا يوجد عقارات للبيع حالياً" : "لا يوجد عقارات للإيجار حالياً"}
              </div>
            )}
          </div>
        </HorizontalAutoScroll>
      </div>
    </div>
  );
}