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

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

import type { CardButtonProps } from './CardButton.types';

/**
 * Tarjeta-botón con imagen de fondo opcional. Usada en el menú principal.
 * NativeWind + Atoms; sin React Native Paper.
 */
export function CardButton({
  label,
  image,
  icon,
  onPress,
  disabled = false,
  className,
  testID,
}: CardButtonProps) {
  return (
    <Pressable
      testID={testID}
      onPress={onPress}
      disabled={disabled}
      accessibilityRole="button"
      accessibilityLabel={label}
      accessibilityState={{ disabled }}
      className={cn(
        'h-36 w-full overflow-hidden rounded-xl shadow-sm shadow-black/10',
        disabled && 'opacity-60',
        className,
      )}
    >
      {image ? (
        <ImageBackground
          source={image}
          imageStyle={{ borderRadius: 12 }}
          className="h-full w-full items-center justify-center"
        >
          <View
            className={cn(
              'h-full w-full items-center justify-center gap-2 px-4',
              disabled ? 'bg-white/40' : 'bg-overlay/40',
            )}
          >
            {icon ? <Icon name={icon} size={28} className="text-primary-foreground" /> : null}
            <Text variant="subtitleLarge" className="text-center font-bold text-primary-foreground">
              {label}
            </Text>
          </View>
        </ImageBackground>
      ) : (
        <View className="h-full w-full items-center justify-center gap-2 bg-primary px-4">
          {icon ? <Icon name={icon} size={28} className="text-primary-foreground" /> : null}
          <Text variant="subtitleLarge" className="text-center font-bold text-primary-foreground">
            {label}
          </Text>
        </View>
      )}
    </Pressable>
  );
}