"use client";

import Link from "next/link";
import { useState } from "react";
import { cn } from "@/lib/cn";

const tabs = [
  { id: "types", label: "Benefit Types" },
  { id: "card-benefits", label: "Benefits by Card" },
] as const;

export function BenefitsTabs() {
  const [active, setActive] = useState<(typeof tabs)[number]["id"]>("types");

  return (
    <section className="w-full bg-white pb-[50px] max-[601px]:pb-[35px]">
      <div className="flex w-full max-w-[1440px] items-center justify-start border-b border-[#d6d6d6]">
        {tabs.map((tab) => (
          <Link
            key={tab.id}
            href={`#${tab.id}`}
            onClick={() => setActive(tab.id)}
            aria-current={active === tab.id ? "true" : undefined}
            className={cn(
              "relative min-w-[180px] px-[30px] py-[15px] text-center font-[Arial,Helvetica,sans-serif] text-[15px] transition-colors duration-[250ms]",
              "after:absolute after:inset-x-0 after:-bottom-px after:h-[2px] after:origin-center after:bg-accent after:transition-transform after:duration-[250ms] after:content-['']",
              "max-[601px]:min-w-0 max-[601px]:flex-1 max-[601px]:px-2 max-[601px]:py-[13px] max-[601px]:text-[14px]",
              active === tab.id
                ? "font-medium text-[#222] after:scale-x-100"
                : "font-normal text-[#666] after:scale-x-0 hover:text-[#222]",
            )}
          >
            {tab.label}
          </Link>
        ))}
      </div>
    </section>
  );
}