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';

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

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

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

  return (
    <>
      <Time>FIN</Time>

      <VerticalSpacer heightUnits={8} />

      <Row>
        <Button label="Recommencer" onPress={handleStart} />

        <HorizontalSpacer widthUnits={3} />

        <Button label="Retour" onPress={() => navigation.navigate('dashboard')} />
      </Row>
    </>
  );
}

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

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