veza/apps/web/src/components/theme/ThemeSwitcher.tsx

import { Palette } from 'lucide-react';

interface ThemeSwitcherProps {
  currentTheme: string;
  onThemeChange: (theme: string) => void;
}

const themes = [
  {
    id: 'bokuseki',
    name: '墨跡 Bokuseki',
    colors: ['var(--sumi-accent)', 'var(--sumi-accent-active)'],
    description: 'Ink Traces — mizu cyan',
    gradient: 'linear-gradient(135deg, var(--sumi-accent) 0%, var(--sumi-accent-active) 100%)',
  },
  {
    id: 'kin',
    name: '金 Kin',
    colors: ['var(--sumi-kin)', '#8b6a08'],
    description: 'Gold Leaf — kinpaku',
    gradient: 'linear-gradient(135deg, var(--sumi-kin) 0%, #8b6a08 100%)',
  },
  {
    id: 'ai',
    name: '藍 Ai',
    colors: ['var(--sumi-ai)', '#1a3548'],
    description: 'Indigo — deep blue',
    gradient: 'linear-gradient(135deg, var(--sumi-ai) 0%, #1a3548 100%)',
  },
  {
    id: 'matcha',
    name: '抹茶 Matcha',
    colors: ['#4f6840', '#3a5030'],
    description: 'Green tea — moss',
    gradient: 'linear-gradient(135deg, #4f6840 0%, #3a5030 100%)',
  },
];

export function ThemeSwitcher({
  currentTheme,
  onThemeChange,
}: ThemeSwitcherProps) {
  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <div className="w-10 h-10 rounded bg-primary flex items-center justify-center">
          <Palette className="w-5 h-5 text-foreground" />
        </div>
        <div>
          <h3 className="text-xl text-foreground" style={{ fontWeight: 300 }}>Color Theme</h3>
          <p className="text-sm text-muted-foreground" style={{ fontWeight: 300 }}>
            Choose your ink palette
          </p>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {themes.map((theme) => (
          <button
            key={theme.id}
            onClick={() => onThemeChange(theme.id)}
            className={`group relative p-8 rounded border-2 transition-all duration-[var(--sumi-duration-normal)] text-left overflow-hidden ${
              currentTheme === theme.id
                ? 'border-primary bg-primary/10 shadow-lg shadow-primary/20'
                : 'border-white/10 bg-muted/50 hover:border-white/30 hover:bg-muted'
            }`}
          >
            {/* Gradient Background */}
            <div
              className="absolute inset-0 opacity-10 group-hover:opacity-20 transition-opacity"
              style={{ background: theme.gradient }}
            />

            {/* Content */}
            <div className="relative z-10">
              <div className="flex items-center gap-4 mb-3">
                <div className="flex gap-2">
                  {theme.colors.map((color, i) => (
                    <div
                      key={i}
                      className="w-10 h-10 rounded shadow-lg transition-opacity group-hover:opacity-80"
                      style={{ backgroundColor: color }}
                    />
                  ))}
                </div>
              </div>

              <div className="mb-2">
                <div className="text-lg text-foreground mb-1" style={{ fontWeight: 400 }}>
                  {theme.name}
                </div>
                <div className="text-sm text-muted-foreground" style={{ fontWeight: 300 }}>
                  {theme.description}
                </div>
              </div>

              {currentTheme === theme.id && (
                <div className="flex items-center gap-2 text-muted-foreground font-mono text-sm animate-slide-in-left">
                  <div className="w-2 h-2 rounded-full bg-primary animate-glow-pulse" />
                  Active
                </div>
              )}
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}