import { Box, Typography, useTheme } from "@mui/material";
import { TicketMessage } from "@root/model/ticket";


interface Props {
    message: TicketMessage;
    isSelf?: boolean;
}

export default function Message({ message, isSelf }: Props) {
    const theme = useTheme();

    const time = (
        <Typography sx={{
            fontSize: "12px",
            alignSelf: "end",
        }}>
            {new Date(message.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
        </Typography>
    );

    return (
        <Box sx={{
            display: "flex",
            justifyContent: isSelf ? "end" : "start",
            gap: "6px",
        }}>
            {isSelf && time}
            <Box sx={{
                backgroundColor: "#2a2b2c",
                p: "12px",
                border: `1px solid ${theme.palette.golden.main}`,
                borderRadius: "20px",
                borderTopLeftRadius: isSelf ? "20px" : 0,
                borderTopRightRadius: isSelf ? 0 : "20px",
                maxWidth: "90%",
            }}>
                <Typography fontSize="14px" sx={{ wordBreak: "break-word" }}>
                    {message.message}
                </Typography>
            </Box>
            {!isSelf && time}
        </Box>
    );
}