import { PrototypeSummary } from "@/lib/prototype";

interface PrototypeCardProps {
  prototype: PrototypeSummary;
  onDelete?: (id: string) => Promise<void>;
}

export function PrototypeCard({ prototype, onDelete }: PrototypeCardProps) {
  return (
    <article className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:border-slate-700 dark:bg-slate-900">
      <div className="flex h-40 items-center justify-center bg-slate-100 text-6xl text-slate-400 dark:bg-slate-800 dark:text-slate-500">
        <span aria-hidden>🧭</span>
      </div>

      <div className="space-y-4 p-6">
        <div>
          <h2 className="line-clamp-2 text-2xl font-semibold text-slate-900 dark:text-slate-50">
            {prototype.name}
          </h2>
          {prototype.description ? (
            <p className="mt-2 line-clamp-2 text-sm text-slate-600 dark:text-slate-300">
              {prototype.description}
            </p>
          ) : (
            <p className="mt-2 text-sm text-slate-400 dark:text-slate-500">暂无描述</p>
          )}
        </div>

        <div className="rounded-full bg-sky-50 px-3 py-1 text-xs text-sky-700 dark:bg-sky-500/20 dark:text-sky-200">
          上传时间：{new Date(prototype.createdAt).toLocaleString()}
        </div>

        <div className="flex gap-3">
          <a
            href={prototype.viewUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="inline-flex flex-1 items-center justify-center rounded-lg bg-sky-600 px-4 py-2.5 text-sm font-medium text-white transition hover:bg-sky-700"
          >
            查看原型
          </a>
          {onDelete ? (
            <button
              type="button"
              onClick={() => onDelete(prototype.id)}
              className="inline-flex items-center justify-center rounded-lg border border-red-200 px-4 py-2.5 text-sm font-medium text-red-600 transition hover:bg-red-50 dark:border-red-900 dark:text-red-300 dark:hover:bg-red-950/40"
            >
              删除
            </button>
          ) : null}
        </div>
      </div>
    </article>
  );
}