import { cn } from '@/lib/utils';
import { Check } from 'lucide-react';
import { MediaItem } from '../types';
import { FileIcon } from './FileIcon';

interface MediaCardProps {
    item: MediaItem;
    selected: boolean;
    isActive?: boolean;
    onClick: () => void;
}

export function MediaCard({ item, selected, isActive, onClick }: MediaCardProps) {
    const isImage = item.file_type?.startsWith('image/');

    return (
        <div
            onClick={onClick}
            className={cn(
                'group relative aspect-square cursor-pointer overflow-hidden',
                'bg-[#f0f0f1] dark:bg-zinc-800',
                // WordPress-style selection: blue border with checkmark
                selected && 'ring-2 ring-[#2271b1] ring-inset',
                // Active state (currently viewing details)
                isActive && !selected && 'ring-2 ring-[#72aee6] ring-inset',
            )}
        >
            {/* Image/File Preview */}
            {isImage ? (
                <img src={item.file_url} alt={item.alt_text || item.title} className="h-full w-full object-contain" loading="lazy" />
            ) : (
                <div className="flex h-full w-full flex-col items-center justify-center bg-[#dcdcde] dark:bg-zinc-700">
                    <FileIcon mimeType={item.file_type} className="h-8 w-8 text-[#50575e] dark:text-zinc-400" />
                    <span className="mt-1 text-[10px] font-medium text-[#50575e] uppercase dark:text-zinc-400">
                        {item.file_name.split('.').pop()}
                    </span>
                </div>
            )}

            {/* Selection Checkmark - WordPress style (top-left corner) */}
            {selected && (
                <div className="absolute top-0 left-0 flex h-6 w-6 items-center justify-center bg-[#2271b1]">
                    <Check className="h-4 w-4 text-white" strokeWidth={3} />
                </div>
            )}

            {/* Hover overlay */}
            {!selected && <div className="absolute inset-0 bg-black/0 transition-colors group-hover:bg-black/10" />}
        </div>
    );
}