import Image from 'next/image';
import Link from 'next/link';
import { ArrowUpRight } from 'lucide-react';
import { Reveal } from '@/components/ui/reveal';
import type { Locale } from '@/i18n/config';

export interface ProjectCardData {
  slug: string;
  title: string;
  location?: string;
  installationType?: string;
  systemSizeKwc?: number;
  coverImage?: string;
}

export function ProjectCard({ project, locale, delay = 0 }: { project: ProjectCardData; locale: Locale; delay?: number }) {
  return (
    <Reveal variant="up" delay={delay} className="h-full">
      <Link
        href={`/${locale}/projects/${project.slug}`}
        className="group relative block aspect-[4/3] overflow-hidden rounded-2xl bg-graphite-900 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-graphite-950/20"
      >
        {project.coverImage && (
          <Image
            src={project.coverImage}
            alt={project.title}
            fill
            className="object-cover opacity-80 transition-all duration-500 group-hover:scale-110 group-hover:opacity-100"
          />
        )}
        <div className="absolute inset-0 bg-gradient-to-t from-graphite-950/90 via-graphite-950/10 to-transparent" />
        <div className="absolute inset-x-0 bottom-0 flex items-end justify-between gap-3 p-5 text-paper-50">
          <div>
            <p className="font-display text-lg font-semibold">{project.title}</p>
            <p className="mt-1 text-sm text-paper-100/70">
              {[project.location, project.systemSizeKwc ? `${project.systemSizeKwc} kWc` : null]
                .filter(Boolean)
                .join(' · ')}
            </p>
          </div>
          <span className="flex h-9 w-9 shrink-0 translate-y-2 items-center justify-center rounded-full bg-copper-500 text-graphite-950 opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100">
            <ArrowUpRight className="h-4 w-4" />
          </span>
        </div>
      </Link>
    </Reveal>
  );
}