import React from "react";

type Props = {
  id: string;
  name: string;
  description?: string;
  tags?: string[];
  previewUrl?: string;
  source?: "firebase" | "local";
  typeOverride?: string; // e.g., "SVG" or "PNG" (optional)
};

export function TemplateCard({
  id,
  name,
  description,
  tags = [],
  previewUrl,
  source = "firebase",
  typeOverride,
}: Props) {
  // Derive a type badge if caller didn't pass one
  const typeFromTags = tags.find(t => ["SVG", "PNG", "JPG", "JPEG"].includes(t.toUpperCase()));
  const typeBadge = (typeOverride || typeFromTags || "").toUpperCase();

  return (
    <div className="rounded-2xl shadow p-4 border border-gray-200 bg-white flex flex-col gap-3">
      {/* Preview */}
      <div className="w-full aspect-[4/3] rounded-xl bg-gray-50 border flex items-center justify-center overflow-hidden">
        {previewUrl ? (
          <img src={previewUrl} alt={name} className="w-full h-full object-contain" loading="lazy" />
        ) : (
          <div className="text-gray-400 text-sm">No preview</div>
        )}
      </div>

      {/* Info */}
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <h3 className="text-lg font-semibold truncate" title={name}>
            {name}
          </h3>
          <p className="text-sm text-gray-600 line-clamp-2" title={description}>
            {description || "—"}
          </p>
        </div>

        {/* Type badge (SVG / PNG / JPG) */}
        {typeBadge && (
          <span className="text-xs px-2 py-1 rounded-full border bg-gray-50 shrink-0">
            {typeBadge}
          </span>
        )}
      </div>

      {/* Footer tags (optional) */}
      {tags.length > 0 && (
        <div className="flex flex-wrap gap-2 pt-1">
          {tags.map((t) => (
            <span key={t} className="text-[11px] px-2 py-0.5 rounded-full bg-gray-100 text-gray-700">
              {t}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}
