import { Calendar, FileText, Info, LucideIcon, Maximize2, Type } from 'lucide-react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Text } from './Text';

export interface MediaMetaItem {
  label: string;
  value: string | number;
  icon?: LucideIcon;
}

export interface MediaMetaPanelProps {
  title?: string;
  items: MediaMetaItem[];
  className?: string;
}

export function MediaMetaPanel({
  title = 'Asset Details',
  items,
  className = '',
}: MediaMetaPanelProps) {
  return (
    <Box
      bg="bg-charcoal-outline/10"
      border
      borderColor="border-charcoal-outline/50"
      rounded="lg"
      p={4}
      className={className}
    >
      <Box display="flex" alignItems="center" gap={2} mb={4}>
        <Icon icon={Info} size={4} color="text-blue-500" />
        <Text weight="semibold" size="sm" uppercase letterSpacing="wider">
          {title}
        </Text>
      </Box>

      <Box display="flex" flexDirection="col" gap={3}>
        {items.map((item, index) => (
          <Box 
            key={`${item.label}-${index}`}
            display="flex" 
            alignItems="center" 
            justifyContent="between"
            pb={index === items.length - 1 ? 0 : 3}
            borderBottom={index === items.length - 1 ? false : true}
            borderColor="border-charcoal-outline/20"
          >
            <Box display="flex" alignItems="center" gap={2}>
              {item.icon && <Icon icon={item.icon} size={3.5} color="text-gray-500" />}
              <Text size="xs" color="text-gray-500" weight="medium">
                {item.label}
              </Text>
            </Box>
            <Text size="xs" weight="semibold" font="mono">
              {item.value}
            </Text>
          </Box>
        ))}
      </Box>
    </Box>
  );
}

// Helper to map common media metadata
export const mapMediaMetadata = (metadata: {
  filename?: string;
  size?: number;
  dimensions?: string;
  contentType?: string;
  createdAt?: string | Date;
}): MediaMetaItem[] => {
  const items: MediaMetaItem[] = [];

  if (metadata.filename) {
    items.push({ label: 'Filename', value: metadata.filename, icon: FileText });
  }
  if (metadata.size) {
    items.push({ label: 'Size', value: `${Math.round(metadata.size / 1024)} KB`, icon: Maximize2 });
  }
  if (metadata.dimensions) {
    items.push({ label: 'Dimensions', value: metadata.dimensions, icon: Maximize2 });
  }
  if (metadata.contentType) {
    items.push({ label: 'Type', value: metadata.contentType, icon: Type });
  }
  if (metadata.createdAt) {
    const date = typeof metadata.createdAt === 'string' ? new Date(metadata.createdAt) : metadata.createdAt;
    items.push({ label: 'Created', value: date.toLocaleDateString(), icon: Calendar });
  }

  return items;
};