import Link from "next/link";
import Frame from "./Frame";
import type { Project } from "@/content/site";

export default function ProjectCard({ project }: { project: Project }) {
  return (
    <Link href={`/work/${project.slug}/`} className="group block">
      <Frame project={project} />
      <div className="mt-5 flex items-start justify-between gap-6">
        <div>
          <h3 className="font-display text-2xl font-light tracking-wide uppercase transition-colors group-hover:text-accent md:text-3xl">
            {project.title}
          </h3>
          <p className="mt-1 text-sm text-muted">{project.client}</p>
        </div>
        <p className="max-w-[45%] pt-2 text-right font-mono text-[11px] tracking-widest text-muted uppercase">
          {project.credits.slice(0, 2).join(" / ")}
        </p>
      </div>
    </Link>
  );
}