import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  css: {
    postcss: {
      plugins: [
        tailwindcss({
          content: ['./index.html', './src/**/*.{ts,tsx}'],
          darkMode: 'class',
          theme: {
            extend: {
              colors: {
                border: 'hsl(240 5.9% 90%)',
                input: 'hsl(240 5.9% 90%)',
                ring: 'hsl(240 5% 64.9%)',
                background: 'hsl(0 0% 100%)',
                foreground: 'hsl(240 10% 3.9%)',
                primary: {
                  DEFAULT: 'hsl(240 5.9% 10%)',
                  foreground: 'hsl(0 0% 98%)',
                },
                secondary: {
                  DEFAULT: 'hsl(240 4.8% 95.9%)',
                  foreground: 'hsl(240 5.9% 10%)',
                },
                muted: {
                  DEFAULT: 'hsl(240 4.8% 95.9%)',
                  foreground: 'hsl(240 3.8% 46.1%)',
                },
                accent: {
                  DEFAULT: 'hsl(240 4.8% 95.9%)',
                  foreground: 'hsl(240 5.9% 10%)',
                },
                destructive: {
                  DEFAULT: 'hsl(0 84.2% 60.2%)',
                  foreground: 'hsl(0 0% 98%)',
                },
              },
              borderRadius: {
                lg: '0.5rem',
                md: 'calc(0.5rem - 2px)',
                sm: 'calc(0.5rem - 4px)',
              },
            },
          },
          plugins: [],
        }),
        autoprefixer(),
      ],
    },
  },
  server: {
    port: 5173,
    proxy: {
      '/api': 'http://localhost:3007',
      '/ws': {
        target: 'ws://localhost:3007',
        ws: true,
      },
    },
  },
});