
import React from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { AspectRatio } from "@/components/ui/aspect-ratio";
import { X } from "lucide-react";

interface ImagePreviewProps {
  value: string;
  aspectRatio: number;
  previewClassName?: string;
  onClear: () => void;
  disabled?: boolean;
}

const ImagePreview = ({ 
  value, 
  aspectRatio, 
  previewClassName = "w-full max-w-md", 
  onClear, 
  disabled = false 
}: ImagePreviewProps) => {
  if (!value) return null;

  return (
    <Card className={previewClassName}>
      <CardContent className="p-4">
        <div className="relative">
          <AspectRatio ratio={aspectRatio}>
            <img
              src={value}
              alt="Preview"
              className="w-full h-full object-cover rounded-lg"
            />
          </AspectRatio>
          <Button
            type="button"
            variant="destructive"
            size="sm"
            className="absolute top-2 right-2"
            onClick={onClear}
            disabled={disabled}
          >
            <X className="h-4 w-4" />
          </Button>
        </div>
      </CardContent>
    </Card>
  );
};

export default ImagePreview;
