interface FallbackArtProps {
  label?: string;
  className?: string;
}

export function FallbackArt({ label, className = "" }: FallbackArtProps) {
  return (
    <div
      className={`relative flex h-full w-full items-end justify-center overflow-hidden bg-gradient-to-br from-gold-500 via-bronze-600 to-charcoal-950 ${className}`}
    >
      <svg
        className="absolute inset-x-0 bottom-0 h-2/3 w-full text-charcoal-950/40"
        viewBox="0 0 400 200"
        preserveAspectRatio="none"
        fill="none"
        aria-hidden="true"
      >
        <path
          d="M0 140 C 60 100, 120 170, 200 120 S 340 90, 400 140 V200 H0 Z"
          fill="currentColor"
        />
        <path
          d="M0 170 C 80 140, 160 190, 240 150 S 360 130, 400 170 V200 H0 Z"
          fill="currentColor"
          opacity="0.6"
        />
      </svg>
      <svg
        className="absolute right-6 top-6 h-6 w-6 text-white/50"
        viewBox="0 0 24 24"
        fill="currentColor"
        aria-hidden="true"
      >
        <path d="M12 0l2.2 8.8L23 11l-8.8 2.2L12 22l-2.2-8.8L1 11l8.8-2.2z" />
      </svg>
      {label ? (
        <span className="relative z-10 pb-5 px-4 text-center text-sm font-semibold uppercase tracking-widest text-white drop-shadow-sm">
          {label}
        </span>
      ) : null}
    </div>
  );
}