"use client";

import React from "react";
import { UsersIcon } from "@heroicons/react/24/outline";
import type { SimCatalogProduct } from "@customer-portal/domain/catalog";
import { SimPlanCard } from "./SimPlanCard";

export function SimPlanTypeSection({
  title,
  description,
  icon,
  plans,
  showFamilyDiscount,
}: {
  title: string;
  description: string;
  icon: React.ReactNode;
  plans: SimCatalogProduct[];
  showFamilyDiscount: boolean;
}) {
  if (plans.length === 0) return null;
  const regularPlans = plans.filter(p => !p.simHasFamilyDiscount);
  const familyPlans = plans.filter(p => p.simHasFamilyDiscount);

  return (
    <div className="animate-in fade-in duration-500">
      <div className="flex items-center gap-3 mb-6">
        {icon}
        <div>
          <h2 className="text-2xl font-bold text-gray-900">{title}</h2>
          <p className="text-gray-600">{description}</p>
        </div>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-6 justify-items-center">
        {regularPlans.map(plan => (
          <SimPlanCard key={plan.id} plan={plan} />
        ))}
      </div>
      {showFamilyDiscount && familyPlans.length > 0 && (
        <>
          <div className="flex items-center gap-2 mb-4">
            <UsersIcon className="h-5 w-5 text-green-600" />
            <h3 className="text-lg font-semibold text-green-900">Family Discount Applied</h3>
            <span className="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">
              Eligible additional lines
            </span>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 justify-items-center">
            {familyPlans.map(plan => (
              <SimPlanCard key={plan.id} plan={plan} isFamily />
            ))}
          </div>
        </>
      )}
    </div>
  );
}
