"use client";

import { useState } from "react";
import MarketCard from "./marketCard";
import { PropertyCard } from "@/types/property-card";
import SegmentedControl from "../common/SegmentedControl";

interface MarketSlidesProps {
  classNames?: string;
  properties: PropertyCard[];
}

export default function MarketSlides({ classNames, properties }: MarketSlidesProps) {
  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, 4);
    const nonPremium = props.filter(p => p.badge !== 'مميز').slice(0, Math.max(0, 4 - premium.length));
    return [...premium, ...nonPremium];
  };

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

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

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

  return (
    <div className={`flex w-full flex-col gap-6 ${classNames}`}>
      {/* <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> */}

      <div key={activeTab}>
        {displayedProperties.length === 0 ? (
          <div className="text-center text-gray-500 py-8">
            {activeTab === "sale" ? "لا يوجد عقارات للبيع حالياً" : "لا يوجد عقارات للإيجار حالياً"}
          </div>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-2 md:grid-cols-1 sm:grid-cols-1 gap-6">
            {displayedProperties.map((card) => (
              <MarketCard
                key={card.id}
                title={card.title}
                subtitle={card.subtitle}
                image={card.image}
                price={card.price}
                area={card.area}
                bedrooms={card.bedrooms}
                bathrooms={card.bathrooms}
                floors={card.floors}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}