import { extendTheme } from "@chakra-ui/react";

const Card = {
  baseStyle: {
    display: "flex",
    flexDirection: "column",
    background: "neutral",
    alignItems: "center",
    gap: 6,
  },
  // Two variants: rounded and smooth
  variants: {
    rounded: {
      padding: 8,
      borderRadius: "xl",
      boxShadow: "xl",
    },
    smooth: {
      padding: 6,
      borderRadius: "base",
      boxShadow: "md",
    },
  },
  // The default variant value
  defaultProps: {
    variant: "smooth",
  },
};

export const theme = extendTheme({
  fonts: {
    heading: "Raleway, sans-serif",
    body: "Inter, sans-serif",
  },
  config: {
    initialColorMode: "dark",
  },
  semanticTokens: {
    color: {
      neutral: {
        default: "white.50",
        _dark: "black.50",
      },
    },
  },
  components: {
    Card,
  },
  styles: {
    global: (props: any) => ({
      "html, body": {
        fontSize: "sm",
        color: props.colorMode === "dark" ? "white" : "gray.600",
        background: props.colorMode === "dark" ? "black" : "white",
        lineHeight: "tall",
      },
      a: {
        color: props.colorMode === "dark" ? "teal.300" : "teal.500",
      },
    }),
  },
  colors: {
    gray: {
      "50": "#F2F2F2",
      "100": "#DBDBDB",
      "200": "#C4C4C4",
      "300": "#ADADAD",
      "400": "#969696",
      "500": "#808080",
      "600": "#666666",
      "700": "#4D4D4D",
      "800": "#333333",
      "900": "#1A1A1A",
    },
  },
});
