import { Button, Typography, useTheme } from "@mui/material";
import Grid from "@mui/material/Unstable_Grid2";

export default function ModelSelection() {
  const theme = useTheme();
  return (
    <>
      <Grid
        container
        mb={2}
        alignItems={"center"}
        border={1}
        borderColor={theme.palette.border.default}
        borderRadius={2}
        padding={2}
        sx={{
          backgroundColor: theme.palette.background.default,
        }}
      >
        <Grid item sm={3}>
          <Typography variant="h4">Select Model:</Typography>
        </Grid>

        <Grid
          item
          container
          alignItems="center"
          justifyContent={"center"}
          sm={2.5}
          border={1}
          borderColor={theme.palette.border.default}
          borderRadius={2}
          sx={{
            backgroundColor: "white",
          }}
        >
          <Button>
            <Typography variant="h6" color="black">
              Model 1
            </Typography>
          </Button>
        </Grid>
        <Grid
          item
          container
          ml={2}
          alignItems="center"
          justifyContent={"center"}
          sm={2.5}
          border={1}
          borderColor={theme.palette.border.default}
          borderRadius={2}
          sx={{
            backgroundColor: "white",
          }}
        >
          <Button>
            <Typography variant="h6" color="black">
              Model 2
            </Typography>
          </Button>
        </Grid>
        <Grid
          item
          ml={2}
          container
          alignItems="center"
          justifyContent={"center"}
          sm={2.5}
          border={1}
          borderColor={theme.palette.border.default}
          borderRadius={2}
          sx={{
            backgroundColor: "white",
          }}
        >
          <Button>
            <Typography variant="h6" color="black">
              Model 3
            </Typography>
          </Button>
        </Grid>
      </Grid>
    </>
  );
}