'use client';

import Image from 'next/image';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger
} from '@/components/ui/dialog';

interface ProductImagePreviewProps {
  alt: string;
  src: string;
}

export function ProductImagePreview({
  alt,
  src
}: ProductImagePreviewProps) {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <button
          type='button'
          className='group relative h-[150px] w-[150px] overflow-hidden rounded-xl border bg-muted/20 shadow-sm transition hover:shadow-md focus-visible:ring-ring cursor-zoom-in focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden'
          aria-label={`Preview image for ${alt}`}
        >
          <Image
            src={src}
            alt={alt}
            fill
            sizes='150px'
            className='object-cover transition duration-300 group-hover:scale-[1.03]'
          />
          <div className='bg-background/70 text-foreground absolute inset-x-0 bottom-0 flex items-center justify-center py-1 text-xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100'>
            Click to preview
          </div>
        </button>
      </DialogTrigger>
      <DialogContent className='max-w-4xl border-none bg-transparent p-0 shadow-none'>
        <DialogHeader className='sr-only'>
          <DialogTitle>{alt}</DialogTitle>
          <DialogDescription>Preview product image in a larger size.</DialogDescription>
        </DialogHeader>
        <div className='bg-background relative overflow-hidden rounded-2xl border shadow-xl'>
          <div className='relative aspect-square max-h-[80vh] w-full'>
            <Image
              src={src}
              alt={alt}
              fill
              sizes='(max-width: 768px) 90vw, 70vw'
              className='object-contain bg-muted/10'
              priority={false}
            />
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}
