/*
  app-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, Github, Tag } from "lucide-react";

import type { ZyquoApp } 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 AppCard({ app }: { app: ZyquoApp }) {
  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">
        <Image
          src={app.icon}
          alt={`${app.name} app icon`}
          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 className="min-w-0">
          <CardTitle className="text-lg">
            <span aria-hidden="true" className="mr-1.5">
              {app.emoji}
            </span>
            {app.name}
          </CardTitle>
          <CardDescription className="mt-1">{app.tagline}</CardDescription>
        </div>
      </CardHeader>
      <CardContent className="flex-1">
        <p className="text-sm text-muted-foreground">{app.description}</p>
      </CardContent>
      <CardFooter className="flex flex-wrap gap-2">
        <Link
          href={`/apps/${app.slug}`}
          className={cn(buttonVariants({ variant: "secondary", size: "sm" }))}
        >
          <ArrowUpRight aria-hidden="true" />
          Details
        </Link>
        <a
          href={app.repo}
          target="_blank"
          rel="noopener noreferrer"
          className={cn(buttonVariants({ variant: "outline", size: "sm" }))}
        >
          <Github aria-hidden="true" />
          GitHub Repo
        </a>
        <a
          href={app.release}
          target="_blank"
          rel="noopener noreferrer"
          className={cn(buttonVariants({ variant: "outline", size: "sm" }))}
        >
          <Tag aria-hidden="true" />
          Release
        </a>
        <a
          href={app.dmg}
          className={cn(buttonVariants({ variant: "default", size: "sm" }))}
        >
          <Download aria-hidden="true" />
          Download DMG
        </a>
      </CardFooter>
    </Card>
  );
}