import { BodyText, Divider, Link, Stack } from '@servicetitan/design-system';
import { FC, useCallback } from 'react';
import { MessageSystem } from './message-system';

export interface IMessageTimeoutProps {
    onResume: () => void;
    onReset: () => void;
}

export const MessageTimeout: FC<IMessageTimeoutProps> = ({ onReset, onResume }) => {
    const handleResume = useCallback(() => {
        onResume();
    }, [onResume]);

    const handleReset = useCallback(() => {
        onReset();
    }, [onReset]);

    return (
        <MessageSystem data-cy="titan-chat-message-timeout" fullWidth>
            <Stack direction="column" spacing="2">
                <Divider />
                <BodyText el="div" className="ta-center">
                    Your session has timed out.
                    <br />
                    Would you like to resume it or start a new one?
                    <br />
                    <Link
                        onClick={handleResume}
                        primary
                        data-cy="titan-chat-message-timeout-resume"
                    >
                        Continue session
                    </Link>{' '}
                    or{' '}
                    <Link onClick={handleReset} primary data-cy="titan-chat-message-timeout-reset">
                        Start new session
                    </Link>
                </BodyText>
            </Stack>
        </MessageSystem>
    );
};