import Link from "next/link";
import {
  FaArrowRight,
  FaBookOpen,
  FaHeartbeat,
  FaFemale,
  FaUsers,
  FaLeaf,
  FaHandsHelping,
} from "react-icons/fa";

type ProgramCardProps = {
  title: string;
  slug: string;
  description: string;
  icon?: string;
};

export default function ProgramCard({
  title,
  slug,
  description,
  icon = "education",
}: ProgramCardProps) {
  const getIcon = () => {
    switch (icon) {
      case "health":
        return <FaHeartbeat />;
      case "women":
        return <FaFemale />;
      case "youth":
        return <FaUsers />;
      case "environment":
        return <FaLeaf />;
      case "community":
        return <FaHandsHelping />;
      default:
        return <FaBookOpen />;
    }
  };

  return (
    <Link
      href={slug}
      className="group flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-5 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl sm:p-6 lg:p-7"
    >
      {/* Icon */}
      <div className="mb-5 flex h-14 w-14 items-center justify-center rounded-2xl bg-amber-100 text-xl text-amber-600 transition group-hover:bg-[var(--accent)] group-hover:text-black">
        {getIcon()}
      </div>

      {/* Title */}
      <h3 className="text-xl font-extrabold leading-snug text-slate-950 sm:text-2xl">
        {title}
      </h3>

      {/* Description */}
      <p className="mt-3 flex-grow text-sm leading-7 text-slate-600 sm:text-base">
        {description}
      </p>

      {/* CTA */}
      <div className="mt-6 inline-flex items-center gap-2 text-sm font-bold text-amber-600">
        Learn More
        <FaArrowRight className="text-xs transition group-hover:translate-x-1" />
      </div>
    </Link>
  );
}