import { Typography } from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";

import { PromocodesList } from "./PromocodesList";
import { CreatePromocodeForm } from "./CreatePromocodeForm";

import theme from "@root/theme";

export const PromocodeManagement = () => (
  <LocalizationProvider dateAdapter={AdapterDayjs}>
    <Typography
      variant="subtitle1"
      sx={{
        width: "90%",
        height: "60px",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        textTransform: "uppercase",
        color: theme.palette.secondary.main,
      }}
    >
      Создание промокода
    </Typography>
    <CreatePromocodeForm />
    <PromocodesList />
  </LocalizationProvider>
);