import { Text } from '@gluestack-ui/themed';
import {RootState} from '@redux/store';
import {View} from 'react-native';
import {useSelector} from 'react-redux';

export function MyDivider() {
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  return (
    <View
      style={{
        flex: 1,
        height: 1,
        backgroundColor: currentTheme.backgroundDark200,
      }}
    />
  );
}

interface MyDividerWithTextProps {
  text?: string;
}

export function MyDividerWithText({text}: MyDividerWithTextProps) {
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  return (
    <View style={{flexDirection: 'row', alignItems: 'center'}}>
      <MyDivider />
      <Text color={currentTheme.warmGray400} style={{marginHorizontal: 10}}>
        {text}
      </Text>
      <MyDivider />
    </View>
  );
}

export function MyVerticalDivider() {
  const currentTheme = useSelector(
    (state: RootState) => state.nonSaveVariables.theme.colors,
  );

  return (
    <View
      style={{
        height: 44,
        marginTop: 2,
        backgroundColor: currentTheme.warmGray600,
        width: 1,
      }}
    />
  );
}
