// components/AvatarUploader.tsx
import React from "react";
import Image from "next/image";
import { IMAGE_BASE_URL, buildStorageUrl } from "@/components/main/BaseUrl";

interface AvatarUploaderProps {
  avatar: string | null;
  onSelectImage: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onRemoveImage: () => void;
}

const AvatarUploader: React.FC<AvatarUploaderProps> = ({
  avatar,
  onSelectImage,
  onRemoveImage,
}) => {
  return (
    <div className="flex flex-col items-center mb-4">
      <span className="text-xl font-bold">لوگو</span>
      <div className="relative w-[120px] h-[120px] flex items-center justify-center text-white rounded-3xl border border-[#676767] overflow-hidden mt-5">
        {avatar ? (
          <>
            <img
              src={
                avatar.startsWith("data:")
                  ? avatar
                  : IMAGE_BASE_URL + avatar
              }
              alt="Avatar"
              className="w-full h-full object-cover"
            />
            <button
              onClick={onRemoveImage}
              className="p-4 absolute top-0 right-0"
            >
              <Image
                src={"/images/icons/close-circle.svg"}
                width={25}
                height={25}
                alt="remove profile icon"
              />
            </button>
          </>
        ) : (
          <label
            htmlFor="fileInput"
            className="cursor-pointer w-[120px] h-[120px] flex items-center justify-center text-white rounded-3xl border border-[#676767]"
          >
            <Image
              src={"/images/icons/gallery-add.svg"}
              width={80}
              height={80}
              alt="add profile icon"
            />
          </label>
        )}
      </div>
      <input
        id="fileInput"
        type="file"
        accept="image/*"
        className="hidden"
        onChange={onSelectImage}
      />
    </div>
  );
};

export default AvatarUploader;
