import React from 'react';
import {Pressable, ViewStyle} from 'react-native';
import Text from '@components/Text';

import {THEME_VALUE, SIZE_TEXT_VARIANT} from './constants';
import {styles} from './styles';
import {PillVariant} from './interfaces';

export interface PillProps {
  label: string;
  size?: 'lg' | 'md' | 'sm';
  variant?: PillVariant;
  backgroundColor?: string;
  borderColor?: string;
  textColor?: string;
  onPress?: () => void;
  disabled?: boolean;
  style?: ViewStyle;
}

/**
 * @deprecated Use `_HuGo/Pill` instead
 */
function Pill({
  label,
  borderColor,
  backgroundColor,
  textColor,
  onPress,
  disabled,
  style,
  variant = 'default',
  size = 'md',
}: PillProps) {
  const theme = THEME_VALUE[variant];
  const sizeProps = SIZE_TEXT_VARIANT[size];

  return (
    <Pressable
      onPress={onPress}
      disabled={disabled}
      style={[
        styles.container,
        disabled && styles.disabled,
        variant.includes('outline') && styles.border,
        {
          backgroundColor: backgroundColor || theme.background,
          height: sizeProps.height,
          paddingHorizontal: sizeProps.paddingHorizontal,
          borderColor: borderColor || theme.borderColor,
        },
        style,
      ]}>
      <Text
        variant={sizeProps.variant}
        color={textColor || theme.color}
        allowFontScaling={false}>
        {label}
      </Text>
    </Pressable>
  );
}

export * from './interfaces';

export default Pill;