import { useRef } from "react";

interface ImagePickerProps {
  src: string | null;
  alt?: string;
  size?: number;
  borderRadius?: number;
  onChange: (file: File) => void;
  uploading?: boolean;
  accept?: string;
}

export function ImagePicker({
  src,
  alt = "",
  size = 80,
  borderRadius = 8,
  onChange,
  uploading = false,
  accept = "image/jpeg,image/png,image/gif,image/webp",
}: ImagePickerProps) {
  const inputRef = useRef<HTMLInputElement>(null);
  const sizeStyle = { width: size, height: size, borderRadius };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) onChange(file);
    e.target.value = "";
  };

  return (
    <div
      className="img-picker"
      style={sizeStyle}
      onClick={() => !uploading && inputRef.current?.click()}
      title={src ? "Change image" : "Add image"}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => {
        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
      }}
    >
      {src
        ? (
          <img
            src={src}
            alt={alt}
            className="img-picker-img"
            style={{ borderRadius }}
          />
        )
        : (
          <div className="img-picker-placeholder" style={{ borderRadius }}>
            <span>+</span>
          </div>
        )}
      <div className="img-picker-overlay" style={{ borderRadius }}>
        {uploading ? "…" : "✎"}
      </div>
      <input
        ref={inputRef}
        type="file"
        accept={accept}
        onChange={handleChange}
        disabled={uploading}
        style={{ display: "none" }}
      />
    </div>
  );
}