import { Box, MantineSize, Text, SimpleGrid } from "@mantine/core";
import classes from './TextChain.module.css'
import { useState, useEffect } from "react";

interface TextChainProps {
    text: string;
    mt?: MantineSize;
}

export function TextChain(props : TextChainProps) {
    const text = props.text;
    const [mounted, setMounted] = useState<boolean[]>([]);

    useEffect(() => {
        const words = text.split(" ");
        setMounted(new Array(words.length).fill(false));
        
        words.forEach((_, index) => {
            setTimeout(() => {
                setMounted(prev => {
                    const newMounted = [...prev];
                    newMounted[index] = true;
                    return newMounted;
                });
            }, index * 50);
        });
    }, [text]);

    return (
        <Box mt={props.mt}>
            <Box className={classes.displayArea}>
                <Text size="sm" mb="md" c="dimmed">
                    Your seed phrase:
                </Text>
                <SimpleGrid cols={3} spacing="xs">
                    {text.split(" ").map((v, i) => {
                        return (
                            <Box 
                                key={i}
                                className={classes.wordBox}
                                style={{
                                    opacity: mounted[i] ? 1 : 0,
                                    transform: mounted[i] ? 'scale(1)' : 'scale(0.9)',
                                    transition: 'opacity 300ms ease, transform 300ms ease',
                                }}
                            >
                                <Text size="xs" c="dimmed" mr={4}>{i + 1}.</Text>
                                <Text size="sm" fw={500}>{v}</Text>
                            </Box>
                        );
                    })}
                </SimpleGrid>
            </Box>
        </Box>
    )
}