"use client";

import { ChangeEvent } from "react";
import { Input } from "@/components/ui/input";

interface ImageUploadProps {
  imagePreview: string | null;
  handleImageChange: (e: ChangeEvent<HTMLInputElement>) => void;
  imageDimensions: { width: number; height: number };
}

export const ImageUpload = ({
  imagePreview,
  handleImageChange,
  imageDimensions,
}: ImageUploadProps) => (
  <div>
    <label className="text-sm font-medium">Product Image</label>
    <div 
      className="relative border rounded-md flex items-center justify-center bg-transparent w-full h-48"
      style={{ width: imageDimensions.width, height: imageDimensions.height }}
    >
      {imagePreview ? (
        <img
          src={imagePreview}
          alt="Preview"
          className="object-contain w-full h-full rounded-md"
        />
      ) : (
        <span className="text-gray-400 text-sm">No Image Selected</span>
      )}
    </div>
    <Input
      type="file"
      accept="image/*"
      onChange={handleImageChange}
      className="mt-2 h-9 text-sm"
    />
  </div>
);