"use client";

import { ChangeEvent } from "react";
import { Input } from "@/components/common/input";
import Image from "next/image";

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 ? (
        <Image
          src={imagePreview}
          alt="Preview"
          width={imageDimensions.width}
          height={imageDimensions.height}
          priority // Load immediately since it's a preview
          placeholder="blur"
          blurDataURL="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PC9zdmc+"
          quality={85}
          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>
);
