import * as React from 'react';
import { View, ViewStyle, TextStyle } from 'react-native';

import { Text } from '~/components/text';
import { color as themeColor, spacing, typography, metrics } from '~/theme';

const BULLET_ITEM: ViewStyle = {
  flexDirection: 'row',
  marginTop: spacing[4],
  paddingBottom: spacing[4],
  borderBottomWidth: metrics.borderWidth[1],
  borderBottomColor: themeColor.palette.gray,
};
const BULLET_CONTAINER: ViewStyle = {
  marginRight: spacing[4] - 1,
  marginTop: spacing[2],
  width: spacing[2],
  height: spacing[2],
  borderRadius: metrics.borderRadius[7],
};
const BULLET_TEXT: TextStyle = {
  flex: 1,
  fontFamily: typography.fonts.regular,
  fontSize: typography.fontSize[3],
  lineHeight: typography.lineHeight[4],
};

export interface BulletItemProps {
  text: string;
  color?: string;
}

export function BulletItem(props: BulletItemProps) {
  const backgroundColor = props.color ? props.color : themeColor.text;
  const color = props.color ? props.color : themeColor.text;

  return (
    <View style={BULLET_ITEM}>
      <View style={[BULLET_CONTAINER, { backgroundColor }]} />
      <Text style={[BULLET_TEXT, { color }]} text={props.text} />
    </View>
  );
}
