import type { FC } from 'react';
import React from 'react';
import { Text } from 'react-native';
import { useTheme } from '../../branding';
import TouchableOpacity from '../../components/TouchableOpacity';
import themedStyles from './styles';
import type { CtaProps } from './types';

const ICON_SIZE = 24;

export const Cta: FC<CtaProps> = ({
    icon: Icon,
    label,
    highlighted = false,
    onPress,
    testID = 'cta'
}) => {
    const { colors, theme } = useTheme();
    const styles = themedStyles[theme];
    const iconColor = highlighted ? colors.starred : colors.gray0;

    return (
        <TouchableOpacity
            onPress={onPress}
            accessibilityRole="button"
            accessibilityLabel={label}
            testID={testID}
            style={styles.container}
        >
            <Icon color={iconColor} size={ICON_SIZE} />
            <Text numberOfLines={1} style={styles.label}>
                {label}
            </Text>
        </TouchableOpacity>
    );
};

export default Cta;