import { createTheme } from '@mui/material/styles';

// Define your color palette
const lightPalette = {
  primary: {
    main: '#1976d2', // Blue color
  },
  secondary: {
    main: '#d32f2f', // Red color
  },
  background: {
    default: '#fafafa',
    paper: '#ffffff',
  },
  text: {
    primary: '#000000',
    secondary: '#555555',
  },
};

const darkPalette = {
  primary: {
    main: '#90caf9', // Light blue
  },
  secondary: {
    main: '#f48fb1', // Light pink
  },
  background: {
    default: '#121212',
    paper: '#1d1d1d',
  },
  text: {
    primary: '#ffffff',
    secondary: '#bbbbbb',
  },
};

// Typography customization
const typography = {
  fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  h1: {
    fontSize: '3rem',
    fontWeight: 700,
  },
  h2: {
    fontSize: '2.5rem',
    fontWeight: 700,
  },
  body1: {
    fontSize: '1rem',
    fontWeight: 400,
  },
};

// Create the theme based on the light or dark mode preference
const theme = createTheme({
  palette: {
    mode: 'light', // Change this to 'dark' for dark mode
    ...(process.env.NODE_ENV === 'development' // Switch for dev mode
      ? lightPalette
      : darkPalette),
  },
  typography,
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920,
    },
  },
});

export default theme;