import { Dimensions, StyleSheet } from 'react-native';
import type { Token } from '../../Theme/constant';
import { BOLD } from '../../../common/weight';

const { height: screenHeight } = Dimensions.get('window');

export default (token: Token) =>
  StyleSheet.create({
    viewMore: {
      color: '#181721',
      fontSize: token['--font-size-2'],
      fontStyle: 'normal',
      fontWeight: BOLD,
      lineHeight: token['--line-height-4'],
      textDecorationLine: 'underline',
    },
    headerWrapper: {
      padding: 20,
    },
    title: {
      fontSize: 18,
      fontWeight: BOLD,
    },
    scrollView: {
      paddingLeft: 20,
      paddingRight: 20,
    },
    listItem: {
      flexDirection: 'row',
      alignItems: 'flex-start',
      marginBottom: token['--spacing-3'],
    },
    dot: {
      width: 4,
      height: 4,
      borderRadius: 3,
      backgroundColor: '#333',
      marginTop: 10,
      marginRight: 8,
    },
    text: {
      fontSize: token['--font-size-2'],
      lineHeight: token['--line-height-3'],
      flexShrink: 1,
    },
    popupWrapper: {
      maxHeight: screenHeight * 0.95,
    },
    popupText: {
      textDecorationLine: 'underline',
      fontWeight: BOLD,
      fontSize: token['--font-size-2'],
      lineHeight: token['--line-height-3'],
    },
  });