import { PencilIcon, UserIcon } from '@/public/Icon';
import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
import style from './index.module.scss';

interface ImageUploaderProps {
  onChange?: (file: File) => void;
  children?: React.ReactNode;
}

const ImageUploader = ({ onChange, children }: ImageUploaderProps) => {
  const [imageUrl, setImageUrl] = useState<string | null>(null);

  const handleDrop = useCallback(
    (acceptedFiles: File[]) => {
      const file = acceptedFiles[0];
      if (file) {
        const url = URL.createObjectURL(file);
        setImageUrl(url);
        onChange?.(file);
      }
    },
    [onChange]
  );

  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop: handleDrop,
    accept: {
      'image/*': ['.jpeg', '.jpg', '.png', '.gif'],
    },
    multiple: false,
  });

  return (
    <div
      className={`${style.imageUploader} d-flex justify-content-center align-items-center`}
      {...getRootProps()}
    >
      <input {...getInputProps()} />

      {imageUrl ? (
        <img
          src={imageUrl}
          alt="Uploaded profile"
          className={style.uploadedImage}
        />
      ) : (
        <UserIcon />
      )}

      <div className={`${style.uploaderIcon}`}>
        <PencilIcon />
      </div>
    </div>
  );
};

export default ImageUploader;