import React from 'react';
import {
  Box,
  Image,
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverBody,
  useColorModeValue,
  Portal,
} from '@chakra-ui/react';

export interface ThumbnailPreviewProps {
  src: string;
  alt: string;
  size?: string;
  previewSize?: string;
  borderRadius?: string;
  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
}

/**
 * ThumbnailPreview - Small thumbnail image with hover to show larger preview
 * Perfect for admin table rows where you want to see images without clicking
 */
const ThumbnailPreview: React.FC<ThumbnailPreviewProps> = ({
  src,
  alt,
  size = '48px',
  previewSize = '300px',
  borderRadius = 'md',
  objectFit = 'cover',
}) => {
  const borderColor = useColorModeValue('gray.200', 'gray.700');
  const bgColor = useColorModeValue('white', 'gray.800');

  return (
    <Popover trigger="hover" placement="right" openDelay={200} closeDelay={100}>
      <PopoverTrigger>
        <Box
          cursor="pointer"
          transition="all 0.2s"
          _hover={{ transform: 'scale(1.05)', boxShadow: 'md' }}
        >
          <Image
            src={src}
            alt={alt}
            boxSize={size}
            objectFit={objectFit}
            borderRadius={borderRadius}
            borderWidth="1px"
            borderColor={borderColor}
            loading="lazy"
          />
        </Box>
      </PopoverTrigger>
      <Portal>
        <PopoverContent
          width={previewSize}
          borderColor={borderColor}
          boxShadow="2xl"
          bg={bgColor}
          _focus={{ boxShadow: '2xl' }}
        >
          <PopoverBody p={0}>
            <Image
              src={src}
              alt={`${alt} - preview`}
              width="100%"
              maxH="400px"
              objectFit="contain"
              borderRadius="md"
              loading="lazy"
            />
          </PopoverBody>
        </PopoverContent>
      </Portal>
    </Popover>
  );
};

export default ThumbnailPreview;
