"use client";

import { cn } from "@/lib/utils";
import { useCartillaStore } from "@/store/cartilla-store";
import { JSX } from "react";

type ServiciosListItemProps = {
  label: string;
  icon: JSX.Element;
  value: string;
};

const CartillaServicesListItem = ({ label, icon, value }: ServiciosListItemProps) => {
  const { rubro, setRubro } = useCartillaStore();
  const active = rubro?.label === label;
  const handleSelect = () => {
    setRubro({ label: label, value: `?rubro=${value}` });
  };

  return (
    <li
      className={cn(
        "text-contigo-verde fill-current bg-white rounded-[1.125rem] stroke-current hover:text-white hover:bg-contigo-verde transition-colors group flex items-center flex-col md:basis-[30.5%] text-center gap-2 px-4 py-5 cursor-pointer",
        { "text-white bg-contigo-verde pointer-events-none": active }
      )}
      key={label}
      role="button"
      tabIndex={0}
      aria-label={label}
      onClick={handleSelect}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          handleSelect();
        }
      }}
    >
      <div className="md:min-h-[4.0625rem]">{icon}</div>

      <h2
        className={cn(
          "group-hover:text-white text-[0.9375rem] lg:text-[1.0313rem] 2xl:text-[1.125rem] transition-colors",
          active ? "text-inherit" : "text-contigo-negro"
        )}
      >
        {label}
      </h2>
    </li>
  );
};

export default CartillaServicesListItem;