import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Divider, Skeleton, Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';
import {GoalInputFormSK} from './GoalInputFormSK';

export function GoalFormSK() {
  const {t} = useTranslation();
  const {theme, spacing} = useTheme();

  return (
    <Skeleton
      style={[
        styles.formContainer,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <GoalInputFormSK label={t('goals.new.title')} />
      <View>
        <Typography weight="semiBold">
          {t('goals.new.add_description')}
        </Typography>
        <Skeleton.Item height={spacing.x16} />
      </View>
      <Divider />
      <GoalInputFormSK label={t('goals.new.target_cycle')} />
      <GoalInputFormSK label={t('goals.new.how_measure_progress')} />
    </Skeleton>
  );
}