import { LayersIcon, QuoteIcon, TagIcon } from "lucide-react";

export default function ArtworkMetaCard({
  gradientColors,
  altText,
  description,
  categories,
  tags,
}: {
  gradientColors: string;
  altText?: string | null;
  description?: string | null;
  categories: { id: string; name: string }[];
  tags: { id: string; name: string }[];
}) {
  const hasData =
    Boolean(altText) ||
    Boolean(description) ||
    categories.length > 0 ||
    tags.length > 0;

  if (!hasData) return null;

  return (
    <div
      className="w-full max-w-xl rounded-xl p-px"
      style={{ background: `linear-gradient(135deg, ${gradientColors})` }}
    >
      <div className="rounded-[11px] border bg-background p-4 shadow-sm space-y-3">
        {altText && (
          <div className="flex items-start gap-2">
            <TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-0.5" />
            <span className="text-sm text-muted-foreground">{altText}</span>
          </div>
        )}

        {description && (
          <div className="flex items-start gap-2">
            <QuoteIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-0.5" />
            <span className="text-sm text-muted-foreground">{description}</span>
          </div>
        )}

        {categories.length > 0 && (
          <div className="flex items-start gap-2 flex-wrap">
            <LayersIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-0.5" />
            {categories.map((cat) => (
              <div key={cat.id} className="text-sm underline">
                {/* <Link key={cat.id} href={`/categories/${cat.id}`} className="text-sm underline"> */}
                {cat.name}
                {/* </Link> */}
              </div>
            ))}
          </div>
        )}

        {tags.length > 0 && (
          <div className="flex items-start gap-2 flex-wrap">
            <TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-0.5" />
            {tags.map((tag) => (
              <div key={tag.id} className="text-sm underline">
                {/* <Link key={tag.id} href={`/tags/${tag.id}`} className="text-sm underline"> */}
                {tag.name}
                {/* </Link> */}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}