import { X } from 'lucide-react';
import type { Asset } from '@/types';

export function AssetPreview({ asset, onClose }: { asset: Asset; onClose: () => void }) {
  return (
    <div
      className="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"
      onClick={onClose}
    >
      <button
        onClick={onClose}
        className="absolute top-4 right-4 p-2 rounded-full bg-zinc-800 hover:bg-zinc-700 text-white"
      >
        <X size={20} />
      </button>

      <div className="max-w-[90vw] max-h-[90vh]" onClick={(e) => e.stopPropagation()}>
        {asset.type === 'image' ? (
          <img
            src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
            alt=""
            className="max-w-full max-h-[90vh] object-contain rounded-lg"
          />
        ) : (
          <video
            src={`/api/assets/file?path=${encodeURIComponent(asset.file_path)}`}
            controls
            autoPlay
            className="max-w-full max-h-[90vh] rounded-lg"
          />
        )}
      </div>
    </div>
  );
}
