import React from "react";
import { Box, Typography, useTheme } from "@mui/material";
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';

import GhostStyledIcon from "../../components/Icon/GhostIcon";
import Token from "../../components/Token/Token";

export const BridgeRoute = ({ coinName, chainTokenName, tokens }) => {
    const theme = useTheme();
    return (
        <Box width="100%" display="flex" alignItems="center" flexDirection="row" flexWrap="wrap">
            <Typography>Route:</Typography>
            <Box display="flex" marginLeft="20px" gap="5px" alignItems="center">
                {tokens?.map((token, index) => {
                    return (
                        <React.Fragment key={index}>
                            <RouteHop key={index} theme={theme} token={token} chainTokenName={chainTokenName} />
                            <GhostStyledIcon sx={{ width: "12px", height: "12px" }} component={ArrowForwardIosIcon} />
                        </React.Fragment>
                    )
                })}
                <RouteHop theme={theme} token={coinName} />
            </Box>

        </Box>
    )
}

const RouteHop = ({ theme, token, chainTokenName, arrowNeeded }) => {
    return (
        <Box
            display="inline-flex"
            sx={{ backgroundColor: theme.colors.gray[600] }}
            borderRadius="6px"
            paddingX="9px"
            paddingY="2px"
            alignItems="center"
        >
            <Token
                chainTokenName={chainTokenName}
                name={token}
                parentSx={{
                    "& svg:nth-of-type(2)": {
                        transform: "scale(0.52)",
                    }
                }}
                sx={{
                    transform: "scale(0.65)",
                    transformOrigin: "center"
                }}
            />
            <Typography fontSize="15px" lineHeight="24px" marginLeft="5px">
                {token}
            </Typography>
        </Box>
    )
}