import { Pressable, View } from 'react-native';

import type { IconName } from '../../atoms/Icon';
import { Icon } from '../../atoms/Icon';
import { Text } from '../../atoms/Text';
import { cn } from '../../lib/cn';

interface BottomMenuButtonProps {
  icon: IconName;
  label: string;
  onPress?: () => void | Promise<void>;
  disabled?: boolean;
  badgeCount?: number;
  tone?: 'active' | 'default' | 'muted';
}

export function BottomMenuButton({
  icon,
  label,
  onPress,
  disabled = false,
  badgeCount = 0,
  tone = 'default',
}: BottomMenuButtonProps) {
  const isDisabled = disabled || !onPress;
  const iconClass = isDisabled
    ? 'text-primary-foreground/35'
    : tone === 'active'
      ? 'text-primary-foreground'
      : tone === 'muted'
        ? 'text-primary-foreground/45'
        : 'text-primary-foreground/85';
  const labelClass = isDisabled
    ? 'font-normal text-primary-foreground/35'
    : tone === 'active'
      ? 'font-semibold text-primary-foreground'
      : tone === 'muted'
        ? 'font-normal text-primary-foreground/45'
        : 'font-normal text-primary-foreground/85';

  return (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ disabled: isDisabled }}
      onPress={onPress}
      disabled={isDisabled}
      className={cn(
        'min-w-[80px] w-full flex-1 items-center justify-center gap-1.5 px-1.5 py-1.5',
        isDisabled && 'opacity-50',
      )}
    >
      <View>
        <Icon name={icon} size={28} className={iconClass} />
        {badgeCount > 0 ? (
          <View className="absolute -right-2.5 -top-2.5 h-5 min-w-5 items-center justify-center rounded-full border border-primary-foreground/40 bg-primary px-1">
            <Text variant="caption" className="text-[12px] text-primary-foreground">
              {badgeCount}
            </Text>
          </View>
        ) : null}
      </View>
      <Text variant="caption" className={`${labelClass} text-[12px]`}>
        {label}
      </Text>
    </Pressable>
  );
}