import { Stack } from "@mui/material";

const ShowPlak = ({ plak_number }) => {
    const processPlak = (plak_number) => {
        const parts = plak_number.match(/^([\u0600-\u06FF]+)(\d+)-(\d+)([^\d]*)(\d+)$/);
        if (!parts) return {};

        return {
            region: parts[1], // "ايران"
            mainNumber: parts[2], // "13"
            serial: parts[3], // "189"
            letter: parts[4], // "الف"
            number: parts[5], // "15"
        };
    };
    const plakParts = processPlak(plak_number);

    return (
        <Stack sx={{ border: 1, borderColor: "divider", borderRadius: 1 }} direction={"row"}>
            <Stack
                sx={{
                    borderRight: 1,
                    borderColor: "divider",
                    textAlign: "center",
                    width: "100%",
                    px: 1,
                }}
            >
                {plakParts.region} {plakParts.mainNumber}
            </Stack>
            <Stack spacing={1} direction={"row"} sx={{ width: "100%" }}>
                <Stack
                    sx={{
                        textAlign: "center",
                        width: "100%",
                        px: 1,
                    }}
                >
                    {plakParts.serial}
                </Stack>
                <Stack
                    sx={{
                        textAlign: "center",
                        width: "100%",
                        pl: 1,
                    }}
                >
                    {plakParts.letter}
                </Stack>
                <Stack
                    sx={{
                        textAlign: "center",
                        width: "100%",
                        px: 1,
                    }}
                >
                    {plakParts.number}
                </Stack>
            </Stack>
        </Stack>
    );
};
export default ShowPlak;