import { Box, styled, useTheme } from "@mui/material";
import { ReactElement } from "react";
import GhostStyledIcon from "../Icon/GhostIcon";
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import LoopIcon from '@mui/icons-material/Loop';

const StyledArrow = styled(Box)(
    ({ theme, onClick }) =>
    onClick && {
        "&": {
            transitionProperty: "all",
            transitionTimingFunction: " cubic-bezier(.4,0,.2,1)",
            transitionDuration: ".15s",
            cursor: "pointer",
        },
        "&:hover": {
            " & .rotate": {
                WebkitTransform: "rotateZ(-360deg)",
                MozTransition: "rotateZ(-360deg)",
                transform: "rotateZ(-360deg)",
            },
        },
        "& .rotate": {
            WebkitTransition: "0.6s ease-out",
            MozTransition: "0.6s ease-out",
            transition: " 0.6s ease-out",
        },
    },
);

const SwapCollection = ({ UpperSwapCard, LowerSwapCard, arrowOnClick }) => {
    const theme = useTheme();

    return (
        <Box display="flex" flexDirection="column" maxWidth="476px">
            {UpperSwapCard}
            <Box display="flex" flexDirection="row" justifyContent="center">
                <StyledArrow
                    width="21px"
                    height="21px"
                    borderRadius="6px"
                    sx={{ backgroundColor: theme.colors.gray[600] }}
                    textAlign="center"
                    marginTop={"-7px"}
                    zIndex="10"
                    onClick={arrowOnClick}
                >
                    <Box pt="1px">
                        <GhostStyledIcon
                            viewBox="0 0 24 24"
                            className="rotate"
                            component={LoopIcon}
                            sx={{
                                fontSize: "15px",
                            }}
                        />
                    </Box>
                </StyledArrow>
            </Box>
            <Box marginTop="-7px">{LowerSwapCard}</Box>
        </Box>
    );
};

export default SwapCollection;