import { cn } from '../../lib/cn';
import { Button } from '../../ui/button';

import { Icon } from '../Icon';

import type { IconButtonProps, IconButtonSize, IconButtonVariant } from './IconButton.types';

const containerClass: Record<IconButtonVariant, string> = {
  primary: 'bg-primary active:bg-primary-700',
  ghost: 'bg-transparent active:bg-content2',
  outline: 'border border-border bg-transparent active:bg-content2',
  danger: 'bg-danger active:bg-danger-600',
  success: 'bg-success active:bg-success-600',
};

const iconColorClass: Record<IconButtonVariant, string> = {
  primary: 'text-primary-foreground',
  ghost: 'text-foreground',
  outline: 'text-foreground',
  danger: 'text-white',
  success: 'text-success-foreground',
};

const sizeClass: Record<IconButtonSize, string> = {
  sm: 'h-9 w-9',
  md: 'h-11 w-11',
  lg: 'h-12 w-12',
};

const sizeIcon: Record<IconButtonSize, number> = {
  sm: 18,
  md: 22,
  lg: 26,
};

export function IconButton({
  icon,
  variant = 'ghost',
  size = 'md',
  disabled = false,
  className,
  iconClassName,
  iconSize,
  accessibilityLabel,
  ...props
}: IconButtonProps) {
  return (
    <Button
      role="button"
      accessibilityRole="button"
      accessibilityLabel={accessibilityLabel ?? icon}
      accessibilityState={{ disabled: !!disabled }}
      disabled={disabled}
      className={cn(
        'items-center justify-center rounded-full',
        containerClass[variant],
        sizeClass[size],
        disabled && 'opacity-50',
        className,
      )}
      {...props}
    >
      <Icon
        name={icon}
        size={iconSize ?? sizeIcon[size]}
        className={cn(iconColorClass[variant], iconClassName)}
      />
    </Button>
  );
}