'use client';

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

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

const theme = createTheme({
    palette: {
        mode: 'dark',
        background: {
            default: '#121212',
            paper: '#1e1e1e',
        },
        primary: {
            main: '#217a42',
        },
        secondary: {
            main: '#0c5639',
        },
        error: {
            main: '#f44336',
        },
        warning: {
            main: '#ff9800',
        },
        info: {
            main: '#2196f3',
        },
        success: {
            main: '#4caf50',
        },
    },
    typography: {
        fontFamily: roboto.style.fontFamily,
        h5: {
            fontWeight: 400,
            fontSize: '1.5rem',
        }
    },
    components: {
        MuiCssBaseline: {
            styleOverrides: `
                :root {
                    ${roboto.style.fontFamily}
                }
            `,
        },
        MuiTextField: {
            defaultProps: {
                variant: 'outlined',
                margin: 'dense',
            },
            styleOverrides: {
                root: {
                    '--TextField-brandBorderColor': '#217a42',
                    '--TextField-brandHoverBorderColor': '#FFFFFF',
                    '--TextField-brandFocusBorderColor': '#0c5639',
                    '& label.Mui-focused': {
                        color: 'var(--TextField-brandFocusBorderColor)',
                    },
                    '& label': {
                        color: 'var(--TextField-brandBorderColor)',
                    },
                },
            },
        },
        MuiOutlinedInput: {
            styleOverrides: {
                notchedOutline: {
                    borderColor: 'var(--TextField-brandBorderColor)',
                },
                root: {
                    [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
                        borderColor: 'var(--TextField-brandHoverBorderColor)',
                    },
                    [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: {
                        borderColor: 'var(--TextField-brandFocusBorderColor)',
                    },
                    [`& .${outlinedInputClasses.input}`]: {
                        color: '#FFFFFF',
                    },
                },
            },
        },
        MuiButton: {
            defaultProps: {
                variant: 'contained',
                color: 'primary',
            },
        },
        MuiAppBar: {
            styleOverrides: {
                
            },
        },
    },
});

export default theme;