// src/themes.js

import { createTheme } from '@mui/material';
import { deepmerge } from '@mui/utils';

const base = {
  palette: {
    mode: 'light',
    typography: {
      button: {
        textTransform: 'none',
      },
    },
    primary: {
      main: '#89BAD1',
      light: '#89BAD1',
      dark: '#89BAD1',
    },
    secondary: {
      main: '#F2C216',
      light: '#F2C216',
      dark: '#F2C216',
    },
    background: {
      paper: 'var(--bg-100)',
    },
  },
  components: {
    MuiOutlinedInput: {
      styleOverrides: {
        root: {
          '& .MuiOutlinedInput-notchedOutline': {
            borderColor: 'var(--text-200)',
          },
          '&:hover .MuiOutlinedInput-notchedOutline': {
            borderColor: 'var(--primary-200)',
          },
          '&$focused .MuiOutlinedInput-notchedOutline': {
            borderColor: 'var(--primary-200)',
          },
        },
      },
    },
  },
};

export const light = createTheme(
  {
    palette: {
      mode: 'light',
    },
  },
  base,
);

export const dark = createTheme(
  {
    palette: {
      mode: 'dark',
    },
  },
  deepmerge(base, {
    components: {
      MuiButton: {
        variants: [
          {
            props: { color: 'primary' },
            style: {
              color: 'white',
            },
          },
        ],
      },
    },
  }),
);