import * as React from 'react';
import {
  Baby,
  Building2,
  Cake,
  Camera,
  Image as ImageIcon,
  Music2,
  PartyPopper,
  ShoppingBag,
  Smartphone,
  Tent,
  User,
  UtensilsCrossed,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import type { DemoCategory } from '@/lib/demo-images';

/**
 * B3 — branded placeholder for REAL entities (vendors/services) that have no
 * uploaded media. Unlike `demoImage`, it never shows a photorealistic stock
 * photo that could be mistaken for the entity's actual product. It mirrors the
 * vendor-logo fallback already used on the vendor page: an entity initial (or a
 * category icon) on a neutral, brand-tinted panel.
 */
const CATEGORY_ICON: Record<DemoCategory, React.ComponentType<{ className?: string }>> = {
  birthday: PartyPopper,
  cake: Cake,
  balloons: PartyPopper,
  kids_decor: Baby,
  catering: UtensilsCrossed,
  photography: Camera,
  venue: Building2,
  entertainer: Music2,
  digital: Smartphone,
  rental: Tent,
  sale: ShoppingBag,
  avatar: User,
  generic: ImageIcon,
};

export interface BrandedPlaceholderProps {
  /** First character is rendered prominently (e.g. service/vendor name). */
  label?: string;
  /** Picks an icon when there is no usable label. */
  category?: DemoCategory;
  /** Accessible label; when omitted the placeholder is treated as decorative. */
  alt?: string;
  className?: string;
}

export function BrandedPlaceholder({
  label,
  category = 'generic',
  alt,
  className,
}: BrandedPlaceholderProps) {
  const initial = label?.trim().charAt(0).toUpperCase();
  const Icon = CATEGORY_ICON[category] ?? ImageIcon;

  return (
    <span
      role={alt ? 'img' : undefined}
      aria-label={alt || undefined}
      aria-hidden={alt ? undefined : true}
      className={cn(
        'flex items-center justify-center bg-gradient-to-br from-primary-50 via-white to-neutral-100 text-primary-400',
        className,
      )}
    >
      {initial ? (
        <span className="font-heading text-3xl font-bold leading-none text-primary-400/90">
          {initial}
        </span>
      ) : (
        <Icon className="h-1/3 w-1/3 max-h-16 max-w-16 opacity-70" />
      )}
    </span>
  );
}