import React from 'react';
import {View} from 'react-native';
import {IconExchange} from '@tabler/icons-react-native';
import {Typography} from '@components/_core/Typography';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

function Slot() {
  const {theme} = useTheme();

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: theme.background.feedback.highlight,
          borderColor: theme.border.states.highlight,
        },
      ]}>
      <IconExchange stroke={theme.text.feedback.highlight} />
      <Typography variant="xxs" color={theme.text.feedback.highlight}>
        This is a placeholder. Swap me with a content.
      </Typography>
    </View>
  );
}

export default Slot;