import Link from "next/link";
import { Badge } from "@/components/ui/badge";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Download, Package } from "lucide-react";

interface AddonCardProps {
  addon: {
    slug: string;
    name: string;
    summary: string;
    iconUrl: string | null;
    category: string;
    totalDownloads: number;
    releases: { version: string }[];
  };
}

export function AddonCard({ addon }: AddonCardProps) {
  const latestVersion = addon.releases?.[0]?.version;

  return (
    <Link href={`/addons/${addon.slug}`}>
      <Card className="h-full transition-shadow hover:shadow-lg">
        <CardHeader>
          <div className="flex items-start gap-3">
            {addon.iconUrl ? (
              <img
                src={addon.iconUrl}
                alt={addon.name}
                className="h-12 w-12 rounded-lg object-cover"
              />
            ) : (
              <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
                <Package className="h-6 w-6 text-primary" />
              </div>
            )}
            <div className="flex-1">
              <CardTitle className="text-lg">{addon.name}</CardTitle>
              <div className="mt-1 flex items-center gap-2">
                <Badge variant="secondary" className="text-xs">
                  {addon.category}
                </Badge>
                {latestVersion && (
                  <span className="text-xs text-muted-foreground">
                    v{latestVersion}
                  </span>
                )}
              </div>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          <CardDescription className="line-clamp-2">
            {addon.summary}
          </CardDescription>
          <div className="mt-3 flex items-center gap-1 text-sm text-muted-foreground">
            <Download className="h-3.5 w-3.5" />
            <span>{addon.totalDownloads.toLocaleString()} 次下载</span>
          </div>
        </CardContent>
      </Card>
    </Link>
  );
}
