import PlanesTableCell from "./planes-table-cell";
import { TCoverage } from "@/types";
import { cn } from "clsx-tailwind-merge";
import Image from "next/image";

type PlanesBodyTableProps = {
  coverages: TCoverage[];
  services_cap: string[];
  services_per_year: string[];
  type: string;
};

const PlanesBodyTable = ({ coverages, services_cap, type, services_per_year }: PlanesBodyTableProps) => {
  const vialBase365 = type === "Vial365Base" ? "md:grid-rows-[repeat(3,3.3125rem)_auto]" : "";
  const medi365 = type === "Medi365" ? "md:grid-rows-[repeat(6,3.3125rem)]" : "";
  const hogar365 = type === "Hogar365" ? "md:grid-rows-[repeat(8,3.3125rem)]" : "";
  return (
    <div className="grid md:grid-cols-[20.75rem_1fr_1fr] w-full mt-6 text-shark">
      <div className="md:rounded-tl-[0.25rem] md:rounded-bl-[0.25rem]">
        <PlanesTableCell className="border-b border-white md:border-b-[0.1875rem] bg-[#EBF7FF] font-bold rounded-[inherit]">
          Cobertura
        </PlanesTableCell>
        <div
          className={`${cn(
            "grid gap-[0.125rem] md:rounded-tl-[0.25rem] md:rounded-bl-[0.25rem]",
            vialBase365,
            hogar365,
            medi365
          )}`}
        >
          {coverages.map(({ icon, title, description }, i) => (
            <PlanesTableCell className="bg-light-gray rounded-[inherit] flex items-center gap-1.5 md:py-2.5" key={i}>
              <Image
                src={`images/icons/${icon}.svg`}
                alt={`Ícono ${icon}`}
                width={24}
                height={24}
                className="w-6 h-6"
              />
              <div className="flex flex-col">
                <span>{title}</span>
                <span className="text-[0.75rem]/[1.3] text-dark-gray">{description}</span>
              </div>
            </PlanesTableCell>
          ))}
        </div>
      </div>
      <div className="md:flex flex-col">
        <PlanesTableCell className="border-b border-white md:border-b-[0.1875rem] bg-[#EBF7FF] font-bold md:border-l-2 md:border-white md:border-r-2 md:text-center whitespace-nowrap">
          Tope por servicio
        </PlanesTableCell>
        <div className={cn("grid gap-[0.125rem] flex-1", vialBase365)}>
          {services_cap.map((service, i) => (
            <PlanesTableCell
              className="bg-light-gray rounded-[inherit] flex items-center gap-1.5 md:justify-center w-full md:border-l-2 border-white md:border-r-2 text-center md:py-2.5 leading-[1.2]"
              key={i}
            >
              {service}
            </PlanesTableCell>
          ))}
        </div>
      </div>
      <div className="md:rounded-tr-[0.25rem] md:rounded-br-[0.25rem] md:text-center md:flex flex-col">
        <PlanesTableCell className="border-b border-white md:border-b-[0.1875rem] bg-[#EBF7FF] font-bold rounded-[inherit]">
          Servicios por año
        </PlanesTableCell>
        <div className={cn("grid gap-[0.125rem] flex-1", vialBase365, medi365, hogar365)}>
          {services_per_year.map((service, i) => (
            <PlanesTableCell
              className="bg-light-gray rounded-[inherit] flex items-center gap-1.5 md:justify-center w-full text-center md:py-2.5 md:px-[min(3vw,3rem)] leading-[1.2]"
              key={i}
            >
              {service}
            </PlanesTableCell>
          ))}
        </div>
      </div>
    </div>
  );
};

export default PlanesBodyTable;