import React from 'react';
import { Box } from './Box';
import { Text } from './Text';
import { ImagePlaceholder } from './ImagePlaceholder';
import { Image } from './Image';

export interface MediaPreviewCardProps {
  src?: string;
  alt?: string;
  title?: string;
  subtitle?: string;
  aspectRatio?: string;
  isLoading?: boolean;
  error?: string;
  onClick?: () => void;
  className?: string;
  actions?: React.ReactNode;
}

export function MediaPreviewCard({
  src,
  alt = 'Media preview',
  title,
  subtitle,
  aspectRatio = '16/9',
  isLoading,
  error,
  onClick,
  className = '',
  actions,
}: MediaPreviewCardProps) {
  return (
    <Box
      display="flex"
      flexDirection="col"
      bg="bg-charcoal-outline/10"
      border
      borderColor="border-charcoal-outline/50"
      rounded="lg"
      overflow="hidden"
      transition
      hoverScale={!!onClick}
      cursor={onClick ? 'pointer' : 'default'}
      onClick={onClick}
      className={`group ${className}`}
    >
      <Box position="relative" width="full" style={{ aspectRatio }}>
        {isLoading ? (
          <ImagePlaceholder variant="loading" aspectRatio={aspectRatio} rounded="none" />
        ) : error ? (
          <ImagePlaceholder variant="error" message={error} aspectRatio={aspectRatio} rounded="none" />
        ) : src ? (
          <Image
            src={src}
            alt={alt}
            className="w-full h-full object-cover"
          />
        ) : (
          <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
        )}
        
        {actions && (
          <Box
            position="absolute"
            top={2}
            right={2}
            display="flex"
            gap={2}
            opacity={0}
            className="group-hover:opacity-100 transition-opacity"
          >
            {actions}
          </Box>
        )}
      </Box>

      {(title || subtitle) && (
        <Box p={3} borderTop borderColor="border-charcoal-outline/30">
          {title && (
            <Text block size="sm" weight="semibold" truncate>
              {title}
            </Text>
          )}
          {subtitle && (
            <Text block size="xs" color="text-gray-500" truncate mt={0.5}>
              {subtitle}
            </Text>
          )}
        </Box>
      )}
    </Box>
  );
}