import { FC } from 'react';
import { Base, Column, Flex, Text } from '..';
import { LocalizeText } from '../../api';
import { DraggableWindow } from '../draggable-window';

interface LayoutTrophyViewProps
{
    color: string;
    message: string;
    date: string;
    senderName: string;
    customTitle?: string;
    onCloseClick: () => void;
}

export const LayoutTrophyView: FC<LayoutTrophyViewProps> = props =>
{
    const { color = '', message = '', date = '', senderName = '', customTitle = null, onCloseClick = null } = props;

    return (
        <DraggableWindow handleSelector=".drag-handler">
            <Column gap={ 0 } alignItems="center" className={ `nitro-layout-trophy trophy-${ color }` }>
                <Flex center fullWidth position="relative" className="trophy-header drag-handler">
                    <Base position="absolute" pointer className="trophy-close" onClick={ onCloseClick } />
                    <Text bold>{ LocalizeText('widget.furni.trophy.title') }</Text>
                </Flex>
                <Column className="trophy-content py-1" gap={ 1 }>
                    { customTitle &&
                        <Text bold>{ customTitle }</Text> }
                    { message }
                </Column>
                <Flex alignItems="center" justifyContent="between" className="trophy-footer mt-1">
                    <Text bold>{ date }</Text>
                    <Text bold>{ senderName }</Text>
                </Flex>
            </Column>
        </DraggableWindow>
    );
}