const theme = require('./theme.json');
const tailpress = require('@jeffreyvr/tailwindcss-tailpress');

// Fonction pour obtenir la couleur de base depuis theme.json
const getBaseColor = (slug) => {
  const color = theme.settings.color.palette.find((c) => c.slug === slug);
  return color ? color.color : null;
};

module.exports = {
  content: [
    './*.php',
    './**/*.php',
    './resources/css/*.css',
    './resources/js/*.js',
    './safelist.txt',
  ],
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '0rem',
      },
    },
    extend: {
      colors: {
        ...tailpress.colorMapper(tailpress.theme('settings.color.palette', theme)),
        'carhop-green': {
          50: getBaseColor('carhop-green-light'),
          100: '#cef9ee',
          200: '#9df2de',
          300: '#64e4c9',
          400: '#34cdb2',
          500: '#1bb198',
          600: '#138e7d',
          700: getBaseColor('carhop-green'), // Base Color
          800: '#145b52',
          900: '#164b45',
          950: '#062d2a',
        },
        'carhop-orange': {
          50: '#fff8eb',
          100: '#ffebc6',
          200: '#ffd588',
          300: '#ffba4a',
          400: getBaseColor('carhop-orange'), // Base Color
          500: '#f97a07',
          600: '#dd5602',
          700: '#b73806',
          800: '#942a0c',
          900: '#7a240d',
          950: '#461002',
        },
        'carhop-purple': {
          50: '#f8f5ff',
          100: '#efe8ff',
          200: '#e2d4ff',
          300: getBaseColor('carhop-purple'), // Base Color
          400: '#ab82fe',
          500: '#8c53f9',
          600: '#7331ec',
          700: '#6020d0',
          800: '#531faa',
          900: '#451b88',
          950: '#2b0665',
        },
        'carhop-blue': {
          50: getBaseColor('carhop-blue-light'),
          100: '#cbfbff',
          200: '#9ef4ff',
          300: '#5be9ff',
          400: getBaseColor('carhop-blue'), // Base Color
          500: '#00b7e5',
          600: '#0091c0',
          700: '#03739b',
          800: '#0d5d7d',
          900: '#104d69',
          950: '#033249',
        },
        'carhop-red': {
          50: '#fcf3f8',
          100: '#fbe8f2',
          200: '#f8d2e6',
          300: '#f4add0',
          400: '#ec7ab0',
          500: '#e25291',
          600: '#d0326f',
          700: getBaseColor('carhop-red'), // Base Color
          800: '#951f49',
          900: '#7c1f3f',
          950: '#4c0b21',
        },
      },
      fontSize: tailpress.fontSizeMapper(
        tailpress.theme('settings.typography.fontSizes', theme)
      ),
      letterSpacing: {
        bigbig: '3px',
      },
    },
    screens: {
      xs: '480px',
      sm: '600px',
      md: '782px',
      lg: tailpress.theme('settings.layout.contentSize', theme),
      xl: tailpress.theme('settings.layout.wideSize', theme),
      '2xl': '1441px',
      '3xl': '1840px',
    },
  },
  plugins: [tailpress.tailwind],
};