import Link from "next/link";
import { ArrowRightIcon } from "lucide-react";

import { programs } from "@/entities/site-content";

type Program = (typeof programs)[number];

export function ProgramCard({ program, index }: { program: Program; index: number }) {
  const href = program.slug === "product-management" ? "/programs/product-management" : "/programs";

  return (
    <Link
      href={href}
      className="group flex min-h-[360px] flex-col justify-between border-2 border-foreground bg-card p-5 shadow-[8px_8px_0_var(--foreground)] transition hover:-translate-y-1 hover:shadow-[12px_12px_0_var(--foreground)]"
    >
      <div className="flex justify-between gap-4 text-sm font-black uppercase">
        <span>0{index + 1}</span>
        <span>{program.duration}</span>
      </div>
      <div>
        <h3 className="text-4xl font-black uppercase leading-none">{program.title}</h3>
        <p className="mt-4 font-bold leading-7">{program.signal}</p>
        <p className="mt-3 leading-7 text-muted-foreground">{program.outcome}</p>
      </div>
      <div>
        <div className="mb-4 flex flex-wrap gap-2">
          {program.deliverables.slice(0, 3).map((item) => (
            <span key={item} className="border-2 border-foreground bg-secondary px-2 py-1 text-xs font-black uppercase">
              {item}
            </span>
          ))}
        </div>
        <div className="flex items-center justify-between border-t-2 border-foreground pt-4 text-sm font-bold">
          <span>{program.level} / {program.seats} / {program.price}</span>
          <ArrowRightIcon className="size-5 transition group-hover:translate-x-1" />
        </div>
      </div>
    </Link>
  );
}
