import Image from "next/image";

import { cn } from "@/lib/utils";

interface RoundImageLabelProps {
  imageSrc?: string;
  imageAlt?: string;
  name?: string;
  size?: "sm" | "md" | "lg";
  className?: string;
}

const sizes = {
  sm: {
    wrapper: "w-20",
    image: "h-16 w-16",
    text: "text-xs",
  },
  md: {
    wrapper: "w-28",
    image: "h-24 w-24",
    text: "text-sm",
  },
  lg: {
    wrapper: "w-32",
    image: "h-28 w-28",
    text: "text-base",
  },
};

export default function RoundImageLabel({
  imageSrc = "/images/leafy-round.svg",
  imageAlt = "",
  name,
  size = "md",
  className,
}: RoundImageLabelProps) {
  const selectedSize = sizes[size];

  return (
    <div className={cn("flex flex-col items-center gap-3", selectedSize.wrapper, className)}>
      {imageSrc && (
        <div className={cn("relative overflow-hidden rounded-full bg-gray-100", selectedSize.image)}>
          <Image
            src={imageSrc}
            alt={imageAlt || name || ""}
            fill
            sizes="112px"
            className="object-cover"
          />
        </div>
      )}

      {name && (
        <p className={cn("max-w-full truncate text-center font-medium text-gray-600", selectedSize.text)}>
          {name}
        </p>
      )}
    </div>
  );
}
