import {View} from 'react-native';
import {IconDots} from '@tabler/icons-react-native';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  isFirst?: boolean;
}

export function ThreeDotsView({isFirst}: Props) {
  const {theme} = useTheme();
  return (
    <View
      style={[
        styles.container,
        isFirst && styles.firstItem,
        {
          borderColor: theme.border.neutral.default,
          backgroundColor: theme.background.layout.tertiary,
        },
      ]}>
      <IconDots
        size={70}
        stroke={theme.text.neutral.default}
        vectorEffect={'non-scaling-stroke'}
      />
    </View>
  );
}