import { Image, X } from "lucide-react";
import { formatFileSize } from "../utils/formatters";

export default function ImagePreview({ file, previewUrl, onReset }) {
  if (!previewUrl) return null;

  return (
    <div className="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
      <div className="p-3 border-b border-slate-100 flex items-center justify-between">
        <div className="flex items-center gap-2 text-sm text-slate-600 min-w-0">
          <Image className="w-4 h-4 text-slate-400 shrink-0" />
          <span className="truncate">{file?.name || "Captured image"}</span>
          {file?.size && (
            <span className="text-slate-400 shrink-0">
              ({formatFileSize(file.size)})
            </span>
          )}
        </div>
        <button
          onClick={onReset}
          className="text-slate-400 hover:text-red-500 transition-colors cursor-pointer"
        >
          <X className="w-4 h-4" />
        </button>
      </div>
      <img
        src={previewUrl}
        alt="Preview gambar"
        className="w-full object-contain max-h-80 bg-slate-50"
      />
    </div>
  );
}