'use client';

import { useLanguage } from '@/context/LanguageContext';
import type { GalleryVisibility } from '@/lib/api';
import {
  GlobeAltIcon,
  LockClosedIcon,
  LinkIcon,
  TicketIcon,
} from '@heroicons/react/24/outline';

const visibilityMeta: Record<
  GalleryVisibility,
  { icon: typeof GlobeAltIcon; className: string; en: string; es: string }
> = {
  public: { icon: GlobeAltIcon, className: 'bg-green-100 text-green-700', en: 'Public', es: 'Pública' },
  private: { icon: LockClosedIcon, className: 'bg-gray-200 text-gray-700', en: 'Private', es: 'Privada' },
  link: { icon: LinkIcon, className: 'bg-blue-100 text-blue-700', en: 'Link only', es: 'Solo enlace' },
  ticket: { icon: TicketIcon, className: 'bg-yellow-100 text-yellow-800', en: 'Ticket holders', es: 'Con entrada' },
};

export default function VisibilityBadge({ visibility }: { visibility: GalleryVisibility }) {
  const { locale } = useLanguage();
  const meta = visibilityMeta[visibility] || visibilityMeta.private;
  const Icon = meta.icon;
  return (
    <span className={`inline-flex items-center gap-1 text-xs px-2 py-1 rounded ${meta.className}`}>
      <Icon className="w-3.5 h-3.5" />
      {locale === 'es' ? meta.es : meta.en}
    </span>
  );
}