import * as React from "react";
import { createTheme, alpha, ThemeOptions } from "@mui/material/styles";
import { common } from "@mui/material/colors";
import { PaletteMode } from "@mui/material";

import { neutral } from "@/theme/color";

export const darkDesignTokens: Partial<ThemeOptions> = {
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          borderRadius: "6px",
          textTransform: "none",
          boxShadow: "none",
        },
        // sizeSmall: {
        //   padding: "6px 16px",
        // },
        // sizeMedium: {
        //   padding: "8px 20px",
        // },
        // sizeLarge: {
        //   padding: "11px 24px",
        // },
        // textSizeSmall: {
        //   padding: "7px 12px",
        // },
        // textSizeMedium: {
        //   padding: "9px 16px",
        // },
        // textSizeLarge: {
        //   padding: "12px 16px",
        // },
      },
    },
  },
  palette: {
    custom: {
      background: "#4047FF",
    },
    // background: {
    //   default: common.white,
    //   paper: common.white,
    // },
    action: {
      active: neutral[500],
      disabled: alpha(neutral[900], 0.38),
      disabledBackground: alpha(neutral[900], 0.12),
      focus: alpha(neutral[900], 0.16),
      hover: alpha("#0CA7FF", 0.1),
      selected: alpha("#0CA7FF", 0.12),
    },
    text: {
      primary: neutral[900],
      secondary: neutral[500],
      disabled: alpha(neutral[900], 0.38),
    },
    primary: {
      main: "#0CA7FF",
      light: "#61C6FF",
      dark: "#0F8CFF",
      contrastText: common.white,
    },
  },
};