'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/primitives/Button';
import { Lightbox } from '@/components/ui/domain/Lightbox';
import { Image } from '@/components/ui/primitives/Image';
import { useT } from '@/lib/i18n/react';

// placehold.co is CSP-allowlisted (img-src); unsplash is not and gets blocked.
const previewImages = [
  {
    id: '1',
    src: 'https://placehold.co/1200x800/c7d2fe/1e1b4b.webp?text=Brunch+table',
    alt: 'Brunch table',
  },
  {
    id: '2',
    src: 'https://placehold.co/1200x800/fecaca/7f1d1d.webp?text=Shared+plates',
    alt: 'Shared plates',
  },
  {
    id: '3',
    src: 'https://placehold.co/1200x800/bbf7d0/14532d.webp?text=Friends+dining',
    alt: 'Friends dining together',
  },
] as const;

export function LightboxPreview() {
  const [open, setOpen] = useState(false);
  const [activeIndex, setActiveIndex] = useState(0);
  const t = useT('design_system');

  return (
    <div className="flex flex-col gap-4">
      <div className="flex flex-wrap gap-3">
        {previewImages.map((image, index) => (
          <Button
            key={image.id}
            type="button"
            variant="ghost"
            size="sm"
            onClick={() => {
              setActiveIndex(index);
              setOpen(true);
            }}
            className="focus-visible:outline-brand-primary-500 h-24 w-24 overflow-hidden rounded-xl focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
          >
            <Image src={image.src} alt={image.alt} className="h-full w-full object-cover" />
          </Button>
        ))}
      </div>
      <div className="flex gap-3">
        <Button type="button" onClick={() => setOpen(true)}>
          {t('open_lightbox')}
        </Button>
      </div>
      <Lightbox
        images={[...previewImages]}
        open={open}
        activeIndex={activeIndex}
        onOpenChange={setOpen}
        onActiveIndexChange={setActiveIndex}
      />
    </div>
  );
}