import Image from "next/image";
import { ArrowUpRight } from "lucide-react";
import type { Project } from "@/data/projects";
import { BrowserFrame } from "@/components/ui/BrowserFrame";
import { cn } from "@/lib/utils";

export function ProjectCard({ project, large }: { project: Project; large?: boolean }) {
  return (
    <a
      href={project.url}
      target="_blank"
      rel="noopener noreferrer"
      className={cn("group block", large && "lg:col-span-2")}
    >
      <BrowserFrame url={project.url}>
        <Image
          src={project.image}
          alt={`Screenshot of the ${project.name} website`}
          fill
          className="object-cover object-top transition-transform duration-500 ease-out group-hover:scale-[1.03]"
          sizes={large ? "(min-width: 1024px) 60vw, 100vw" : "(min-width: 1024px) 30vw, 100vw"}
        />
      </BrowserFrame>

      <div className="mt-4 flex items-start justify-between gap-3">
        <div>
          <p className="font-mono text-[11px] uppercase tracking-wide text-indigo dark:text-indigo-light">
            {project.category}
          </p>
          <h3 className="mt-1.5 text-base font-semibold text-slate-950 dark:text-white">
            {project.name}
          </h3>
        </div>
        <ArrowUpRight className="mt-1 h-4 w-4 shrink-0 text-slate-400 transition-transform duration-200 ease-out group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-indigo dark:group-hover:text-indigo-light" />
      </div>
      <p className="mt-2 text-sm leading-relaxed text-slate-500 dark:text-slate-400">
        {project.description}
      </p>
    </a>
  );
}