/*
  project-card.tsx
  spboucher.ai Web
  Author: Simon-Pierre Boucher
  Mail: contact@spboucher.ai
*/

import Image from "next/image";
import Link from "next/link";
import { ArrowUpRight, Download, ExternalLink, Github } from "lucide-react";

import type { OpenSourceProject } from "@/lib/apps";
import { buttonVariants } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { cn } from "@/lib/utils";

export function ProjectCard({ project }: { project: OpenSourceProject }) {
  return (
    <Card className="group flex h-full flex-col hover:-translate-y-1 hover:border-primary/25 hover:shadow-[var(--shadow-lift)]">
      <CardHeader className="flex-row items-center gap-4 space-y-0">
        {project.icon ? (
          <Image
            src={project.icon}
            alt={`${project.name} logo`}
            width={64}
            height={64}
            className="h-16 w-16 shrink-0 rounded-[0.7rem] border border-border shadow-[var(--shadow-soft)] transition-transform duration-300 group-hover:scale-105"
          />
        ) : (
          <div
            aria-hidden="true"
            className="flex h-16 w-16 shrink-0 items-center justify-center rounded-[0.7rem] border border-foreground/15 bg-card text-3xl shadow-[var(--shadow-soft)] transition-transform duration-300 group-hover:scale-105"
          >
            {project.emoji}
          </div>
        )}
        <div className="min-w-0">
          <CardTitle className="text-lg">{project.name}</CardTitle>
          <CardDescription className="mt-1">{project.tagline}</CardDescription>
        </div>
      </CardHeader>
      <CardContent className="flex-1">
        <p className="text-sm text-muted-foreground">{project.description}</p>
      </CardContent>
      <CardFooter className="flex flex-wrap items-center gap-2">
        <Link
          href={`/apps/${project.slug}`}
          className={cn(buttonVariants({ variant: "secondary", size: "sm" }))}
        >
          <ArrowUpRight aria-hidden="true" />
          Details
        </Link>
        <a
          href={project.repo}
          target="_blank"
          rel="noopener noreferrer"
          className={cn(buttonVariants({ variant: "outline", size: "sm" }))}
        >
          <Github aria-hidden="true" />
          GitHub Repo
        </a>
        {project.demo ? (
          <a
            href={project.demo}
            target="_blank"
            rel="noopener noreferrer"
            className={cn(buttonVariants({ variant: "default", size: "sm" }))}
          >
            <ExternalLink aria-hidden="true" />
            Live Demo
          </a>
        ) : null}
        {project.dmg ? (
          <a
            href={project.dmg}
            className={cn(buttonVariants({ variant: "default", size: "sm" }))}
          >
            <Download aria-hidden="true" />
            Download DMG
          </a>
        ) : null}
        <span className="ml-auto rounded-[0.4rem] border border-border bg-muted/60 px-2 py-0.5 font-mono text-[0.62rem] uppercase tracking-[0.1em] text-muted-foreground">
          {project.language}
        </span>
      </CardFooter>
    </Card>
  );
}