import { Box, Typography } from "@mui/material";


interface Props {
    isSelf: boolean;
    text: string;
    time: string;
}

export default function Message({ isSelf, text, time }: Props) {

    return (
        <Box
            sx={{
                display: "flex",
                alignSelf: isSelf ? "end" : "start",
                gap: "9px",
                pl: isSelf ? undefined : "8px",
                pr: isSelf ? "8px" : undefined,
            }}
        >
            <Typography
                sx={{
                    alignSelf: "end",
                    fontWeight: 400,
                    fontSize: "14px",
                    lineHeight: "17px",
                    order: isSelf ? 1 : 2,
                    color: "#9A9AAF",
                    mb: "-4px",
                }}
            >{time}</Typography>
            <Box
                sx={{
                    backgroundColor: isSelf ? "white" : "#9A9AAF",
                    border: "1px solid #9A9AAF",
                    order: isSelf ? 2 : 1,
                    p: "18px",
                    borderRadius: "8px",
                    maxWidth: "464px",
                    color: isSelf ? "#4D4D4D" : "white",
                    position: "relative",
                }}
            >
                <svg
                    style={{
                        position: "absolute",
                        top: "-1px",
                        right: isSelf ? "-8px" : undefined,
                        left: isSelf ? undefined : "-8px",
                        transform: isSelf ? undefined : "scale(-1, 1)",
                    }}
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="8"
                    viewBox="0 0 16 8"
                    fill="none"
                >
                    <path d="M0.5 0.5L15.5 0.500007
                        C10 0.500006 7.5 8 7.5 7.5H7.5H0.5V0.5Z"
                        fill={isSelf ? "white" : "#9A9AAF"}
                        stroke="#9A9AAF"
                    />
                    <rect y="1" width="8" height="8" fill={isSelf ? "white" : "#9A9AAF"} />
                </svg>
                <Typography>{text}</Typography>
            </Box>
        </Box>
    );
}