import { ImageIcon } from 'lucide-react';

import type { UploadVideo } from '@/types';

import { resolveMediaUrl } from './uploadUtils';

interface UploadThumbnailProps {
  upload: UploadVideo;
  className?: string;
}

export function UploadThumbnail({ upload, className }: UploadThumbnailProps) {
  const thumbnailUrl = resolveMediaUrl(upload.thumbnail);

  return (
    <div className={className}>
      <div className="aspect-video overflow-hidden rounded-md border bg-muted/40">
        {thumbnailUrl ? (
          <img
            src={thumbnailUrl}
            alt={upload.filename}
            loading="lazy"
            className="h-full w-full object-cover"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center text-muted-foreground">
            <ImageIcon className="size-8" />
          </div>
        )}
      </div>
    </div>
  );
}