"use client";

import Image from "next/image";

import { ArrowRight } from "@phosphor-icons/react";

import { BLUR } from "@/lib/blurData";
import type { Project } from "@/lib/projects";

type ProjectCardProps = {
  project: Project;
  onOpen: (project: Project, trigger?: HTMLElement) => void;
};

export default function ProjectCard({ project, onOpen }: ProjectCardProps) {
  const blur = BLUR[project.cover];

  return (
    <article className="card-lift group flex h-full flex-col overflow-hidden rounded-card border border-line bg-paper">
      <button
        type="button"
        onClick={(e) => onOpen(project, e.currentTarget)}
        aria-label={`View details of ${project.title}`}
        className="relative block aspect-[4/3] w-full overflow-hidden text-left"
      >
        <Image
          src={project.cover}
          alt={project.title}
          fill
          sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
          placeholder={blur ? "blur" : undefined}
          blurDataURL={blur}
          className="object-cover transition-transform duration-500 group-hover:scale-[1.04]"
        />
      </button>
      <div className="flex flex-1 flex-col p-6">
        <h2 className="font-display text-lg font-semibold leading-snug tracking-tight text-ink">
          {project.title}
        </h2>
        {project.meta ? (
          <p className="mt-2 text-sm leading-relaxed text-ink-soft">
            {project.meta}
          </p>
        ) : null}
        <div className="mt-auto pt-5">
          <button
            type="button"
            onClick={() => onOpen(project)}
            className="link-arrow"
          >
            View Details
            <ArrowRight className="ph" weight="bold" aria-hidden="true" />
          </button>
        </div>
      </div>
    </article>
  );
}