import { useRef } from "react";
import { Upload, Camera } from "lucide-react";

interface ImageUploadProps {
  imagePreviewUrl: string | null;
  onUploadClick: () => void;
  onImageSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
}

export const ImageUpload = ({
  imagePreviewUrl,
  onUploadClick,
  onImageSelect,
}: ImageUploadProps) => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  return (
    <div className="flex flex-col gap-2 items-center">
      <div className="relative">
        <div
          className="relative w-24 h-24 rounded-full border-2 border-dashed border-GRAY3 flex items-center justify-center bg-WHITE3 cursor-pointer"
          onClick={onUploadClick}
          onKeyDown={(e) =>
            (e.key === "Enter" || e.key === " ") && onUploadClick()
          }
          role="button"
          tabIndex={0}
          aria-label="Upload store logo"
        >
          {imagePreviewUrl ? (
            <img
              src={imagePreviewUrl}
              alt="Store Logo"
              className="w-full h-full rounded-full object-cover"
            />
          ) : (
            <Upload size={32} className="text-GRAY" />
          )}
          <div className="absolute -bottom-2 -right-2 w-10 h-10 bg-WHITE rounded-full shadow-md border-2 border-WHITE2 flex items-center justify-center">
            <Camera size={24} className="text-BLACK2" />
          </div>
        </div>
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          onChange={onImageSelect}
          className="hidden"
        />
      </div>
    </div>
  );
};
export const ProductImageUpload = ({
  imagePreviewUrl,
  onUploadClick,
  onImageSelect,
}: ImageUploadProps) => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  return (
    <div className="flex flex-col gap-2 items-center">
      <div className="relative">
        <div
          className="relative w-24 h-24 rounded-full border-2 border-dashed border-GRAY3 flex items-center justify-center bg-WHITE3 cursor-pointer"
          onClick={onUploadClick}
          onKeyDown={(e) =>
            (e.key === "Enter" || e.key === " ") && onUploadClick()
          }
          role="button"
          tabIndex={0}
          aria-label="Upload store logo"
        >
          {imagePreviewUrl ? (
            <img
              src={imagePreviewUrl}
              alt="Store Logo"
              className="w-full h-full rounded-full object-cover"
            />
          ) : (
            <Upload size={32} className="text-GRAY" />
          )}
          <div className="absolute -bottom-2 -right-2 w-10 h-10 bg-WHITE rounded-full shadow-md border-2 border-WHITE2 flex items-center justify-center">
            <Camera size={24} className="text-BLACK2" />
          </div>
        </div>
        <input
          ref={fileInputRef}
          type="file"
          accept="image/*"
          onChange={onImageSelect}
          className="hidden"
        />
      </div>
    </div>
  );
};