import { Icon } from "@iconify/react";
import { cn } from "@/lib/utils";

interface LogoItemProps {
  icon: string;
  alt: string;
  size?: "sm" | "md" | "lg";
  className?: string;
  iconClassName?: string;
}

const iconSizeMap = {
  sm: "size-6",
  md: "size-7",
  lg: "size-8",
};

const tileSizeMap = {
  sm: "size-12",
  md: "size-14",
  lg: "size-16",
};

export function LogoItem({
  icon,
  alt,
  size = "md",
  className,
  iconClassName,
}: LogoItemProps) {
  return (
    <div className={cn("flex items-center justify-center", className)}>
      <div
        className={cn(
          "flex items-center justify-center rounded-2xl border border-border/50 bg-white shadow-sm transition-all duration-300",
          "hover:-translate-y-1 hover:shadow-md",
          "dark:border-white/10 dark:bg-white/95 dark:shadow-lg dark:shadow-black/25",
          tileSizeMap[size]
        )}
      >
        <Icon
          icon={icon}
          className={cn("shrink-0", iconSizeMap[size], iconClassName)}
          aria-label={alt}
        />
      </div>
    </div>
  );
}