import { Text, View } from '@/components/shared/Themed';
import styled from '@emotion/native';
import { useNavigation } from 'expo-router';
import { NativeStackNavigationProp } from 'react-native-screens/lib/typescript/native-stack/types';

import Button from '@/components/shared/Button';
import { HorizontalSpacer, VerticalSpacer } from '@/components/shared/Spacers';
import { RootStackParamList } from '@/app/RootStackParamList';
import { i18n } from '@/app/i18n/i18n';

type FinishContentProps = {
  handleStart: () => void;
};

type NavigationProp = NativeStackNavigationProp<RootStackParamList, 'Dashboard'>;

const t = i18n.scoped('timer.finishContent');

export default function FinishContent({
  handleStart
}: FinishContentProps) {
  const navigation = useNavigation<NavigationProp>();

  return (
    <>
      <Time>{t('finish')}</Time>

      <VerticalSpacer heightUnits={8} />

      <Row>
        <Button label={t('restart')} onPress={handleStart} />

        <HorizontalSpacer widthUnits={3} />

        <Button label={i18n.t('back')} onPress={() => navigation.navigate('Dashboard')} />
      </Row>
    </>
  );
}

const Row = styled(View)(() => ({
  flexDirection: 'row',
  backgroundColor: 'black'
}));

const Time = styled(Text)(({ theme }) => ({
  fontSize: 70,
  fontWeight: 'bold',
  color: theme.colors.white
}));