'use client';

import React from 'react';
import { motion } from 'framer-motion';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Image } from '@/ui/Image';
import { ImagePlaceholder } from '@/ui/ImagePlaceholder';

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

export function MediaCard({
  src,
  alt = 'Media asset',
  title,
  subtitle,
  aspectRatio = '16/9',
  isLoading,
  error,
  onClick,
  actions,
}: MediaCardProps) {
  return (
    <Box
      as={motion.div}
      whileHover={{ y: -4 }}
      transition={{ duration: 0.2, ease: [0.25, 0.1, 0.25, 1] }} // Fast ease-out
      h="full"
    >
      <Box
        display="flex"
        flexDirection="col"
        bg="bg-charcoal/40"
        border
        borderColor="border-charcoal-outline/30"
        rounded="lg"
        overflow="hidden"
        cursor={onClick ? 'pointer' : 'default'}
        onClick={onClick}
        group
        h="full"
      >
        <Box position="relative" width="full" aspectRatio={aspectRatio}>
          {isLoading ? (
            <ImagePlaceholder variant="loading" aspectRatio={aspectRatio} rounded="none" />
          ) : error ? (
            <ImagePlaceholder variant="error" message={error} aspectRatio={aspectRatio} rounded="none" />
          ) : src ? (
            <Box w="full" h="full" overflow="hidden">
              <Image
                src={src}
                alt={alt}
                objectFit="cover"
                fullWidth
                fullHeight
              />
            </Box>
          ) : (
            <ImagePlaceholder aspectRatio={aspectRatio} rounded="none" />
          )}
          
          {actions && (
            <Box
              position="absolute"
              top="2"
              right="2"
              display="flex"
              gap={2}
              opacity={0}
              groupHoverOpacity={1}
              transition
            >
              {actions}
            </Box>
          )}
        </Box>

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