import { Roboto } from 'next/font/google';
import { createTheme } from '@mui/material/styles';

const roboto = Roboto({
  weight: ['300', '400', '500', '700'],
  subsets: ['latin'],
  display: 'swap',
});

const sharedComponents = {
  MuiButton: {
    styleOverrides: {
      root: {
        textTransform: 'none' as const,
      },
    },
  },
  MuiAlert: {
    styleOverrides: {
      root: ({ ownerState }: { ownerState: { severity?: string } }) => ({
        ...(ownerState.severity === 'info' && {
          backgroundColor: '#60a5fa',
        }),
      }),
    },
  },
};

const sharedTypography = {
  fontFamily: roboto.style.fontFamily,
};

export const lightTheme = createTheme({
  palette: { mode: 'light' },
  typography: sharedTypography,
  components: sharedComponents,
});

export const darkTheme = createTheme({
  palette: { mode: 'dark' },
  typography: sharedTypography,
  components: sharedComponents,
});

export default lightTheme;