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

import { Badge } from "@/components/ui/badge";
import { AppCard } from "@/components/ui/app-card";
import { SectionHeading } from "./section-heading";
import type { ProjectCardCopy, ProjectsSectionCopy } from "./types";

type ProjectsSectionProps = {
  copy: ProjectsSectionCopy;
  items: ProjectCardCopy[];
};

export function ProjectsSection({ copy, items }: ProjectsSectionProps) {
  return (
    <section className="space-y-10">
      <SectionHeading
        eyebrow={copy.eyebrow}
        title={copy.title}
        description={copy.description}
      />

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3 xl:gap-6">
        {items.map((item, index) => (
          <AppCard
            key={`${item.title}-${index}`}
            layer="single"
            interactive
            className={[
              "group h-full border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:bg-background/80 hover:shadow-lg",
              index === 0 ? "lg:col-span-2" : "",
            ].join(" ")}
          >
            <div className="flex h-full flex-col gap-6 p-6">
              <div className="flex flex-wrap items-center gap-2">
                {item.meta.map((metaItem) => (
                  <Badge
                    key={metaItem}
                    variant="outline"
                    className="border-border/80 bg-background text-muted-foreground transition-colors duration-300 group-hover:border-border-strong group-hover:text-foreground/80"
                  >
                    {metaItem}
                  </Badge>
                ))}
              </div>

              <div className="space-y-3">
                <h3 className="text-2xl font-semibold tracking-[-0.05em] text-foreground transition-colors duration-300 group-hover:text-foreground/95">
                  {item.title}
                </h3>
                <p className="text-sm leading-7 text-muted-foreground">{item.summary}</p>
              </div>

              <div className="space-y-3">
                <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
                  {copy.stackLabel}
                </p>
                <div className="flex flex-wrap gap-2">
                  {item.stack.map((stackItem) => (
                    <Badge
                      key={stackItem}
                      variant="secondary"
                      className="bg-secondary/70 text-foreground transition-colors duration-300 group-hover:bg-secondary"
                    >
                      {stackItem}
                    </Badge>
                  ))}
                </div>
              </div>

              <div className="mt-auto">
                <Link
                  href={item.href}
                  className="inline-flex items-center gap-2 text-sm font-medium text-foreground transition-all duration-200 group-hover:translate-x-0.5"
                >
                  {item.cta}
                  <ArrowUpRight className="h-4 w-4 transition-transform duration-200 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
                </Link>
              </div>
            </div>
          </AppCard>
        ))}
      </div>
    </section>
  );
}