import React from 'react';
import { Text, View } from '@/components/shared/Themed';
import styled from '@emotion/native';
import { useRouter } from 'expo-router';

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

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

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

export default function FinishContent({
  handleStart,
  handleReset
}: FinishContentProps) {
  const router = useRouter();

  const handleBackClick = () => {
    router.push('/');
    handleReset();
  };

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

      <VerticalSpacer heightUnits={8} />

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

        <HorizontalSpacer widthUnits={3} />

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

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

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