// app/components/InfoCard.tsx

import { HiOutlineArrowNarrowRight } from "react-icons/hi";

interface InfoCardProps {
  title: string;
  description: string;
  actionLabel: string;
  href?: string;
  onClick?: () => void;
}

export default function InfoCard({ title, description, actionLabel, href, onClick }: InfoCardProps) {
  const actionClasses = `
    group inline-flex items-center gap-2 
    text-[#f1c50e] font-bold uppercase text-[1rem] 
    tracking-wider transition-all duration-300 
    relative pb-1
  `;

  const content = (
    <>
      <span>{actionLabel}</span>
      <HiOutlineArrowNarrowRight
        className="text-[1.2rem] transition-transform duration-300 group-hover:translate-x-2"
      />
      <span className="absolute bottom-0 left-0 w-full h-0.5 bg-[#f1c50e] transform scale-x-0 transition-transform duration-300 origin-left group-hover:scale-x-100" />
    </>
  );

  return (
    <div className="bg-[#406185] text-white w-full max-w-180 py-8 px-6 text-center shadow-lg rounded-sm">
      <h2 className="uppercase text-[clamp(1.5rem,8vw,2.25rem)] font-bold leading-tight mb-2">
        {title}
      </h2>
      <p className="mb-6 text-[1rem] leading-[1.4] opacity-90">
        {description}
      </p>

      <div className="flex justify-center">
        {href ? (
          <a
            href={href}
            target="_blank"
            rel="noreferrer"
            className={actionClasses}
          >
            {content}
          </a>
        ) : (
          <button
            onClick={onClick}
            className={actionClasses}
          >
            {content}
          </button>
        )}
      </div>
    </div>
  );
}