import Link from "next/link";
import type { Competition } from "@/lib/content";

export function CompetitionCard({ c, index }: { c: Competition; index?: number }) {
  return (
    <Link
      href={`/yarismalar/${c.slug}`}
      className="group flex items-start gap-6 border-2 border-neutral-900 bg-white p-6 transition hover:-translate-y-1 hover:bg-yellow-50 md:p-8"
    >
      <div className="text-4xl font-black text-violet-700 md:text-5xl">
        {typeof index === "number"
          ? String(index + 1).padStart(2, "0")
          : c.slug === "hands-on-challenge"
            ? "01"
            : c.slug === "ideathon"
              ? "02"
              : "03"}
      </div>
      <div className="flex-1">
        <div className="flex flex-wrap items-baseline gap-3">
          <h3 className="text-2xl font-black tracking-tight md:text-3xl">{c.name}</h3>
          <span className="text-xs font-black uppercase tracking-[0.2em] text-neutral-500">
            {c.durationDays ? `${c.durationDays} gün` : c.short}
          </span>
        </div>
        <p className="mt-3 text-neutral-700">{c.tagline}</p>
        <div className="mt-4 flex flex-wrap gap-2">
          {c.categories?.slice(0, 3).map((cat) => (
            <span
              key={cat}
              className="border border-neutral-900 bg-white px-2 py-0.5 text-[11px] font-bold uppercase tracking-wider text-neutral-700"
            >
              {cat}
            </span>
          ))}
        </div>
      </div>
      <span className="mt-2 text-2xl text-neutral-900 transition group-hover:translate-x-1">
        →
      </span>
    </Link>
  );
}
