import React from 'react';
import {StyleProp, ViewStyle} from 'react-native';
import {IconChevronDown} from '@tabler/icons-react-native';
import {Pressable, Typography} from '@components';
import {ICON_SIZES, useTheme} from '@shared/theme';
import {COLORS} from '@shared/colors';

import {styles} from './styles';

export interface ButtonProps {
  text: string;
  onPress: () => void;
  disabled?: boolean;
  style?: StyleProp<ViewStyle>;
}

export function ChatLoadMoreButton({
  text,
  disabled,
  style,
  onPress,
}: ButtonProps) {
  const {theme} = useTheme();
  return (
    <Pressable
      onPress={onPress}
      backgroundColor={COLORS.TRANSPARENT_WHITE}
      disabled={disabled}
      style={[styles.container, style]}>
      <Typography
        numberOfLines={1}
        variant="s"
        weight="semiBold"
        color={theme.brand[400]}>
        {text}
      </Typography>
      <IconChevronDown size={ICON_SIZES.x6} color={theme.brand[400]} />
    </Pressable>
  );
}
