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

interface Props {
    title: string;
    onClick: () => void;
}

export const NavCard = ({
    title,
    onClick
}: Props) => {

    return (
        <ButtonBase onClick={onClick}
        sx={{
            maxWidth: "570px",
            height: "70px",
            borderRadius: "12px",
            bgcolor: "white",
            display: "flex",
            justifyContent: "space-between",
            p: "0 20px 0  30px",
            m: "10px",
            minWidth: "343px",
            width: "100%"
        }}
        >
                <Typography>{title}</Typography>

          <SimpleArrowDown
            sx={{
              transform: "rotate(270deg)"
            }}
            />
        </ButtonBase>
    )
}