apps/matrix-frontend/src/components/ThemeToggle.tsx

import { Sun, Moon, Monitor, Palette, Check } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
  DropdownMenuLabel,
} from '@/components/ui/dropdown-menu';
import { useTheme, SKINS, SkinId } from '@/contexts/ThemeContext';
import { cn } from '@/lib/utils';

const ThemeToggle = () => {
  const { theme, setTheme, resolvedTheme, skin, setSkin, currentSkin } = useTheme();

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="sm" className="gap-2">
          <Palette className="w-5 h-5" />
          <span className="hidden sm:inline text-xs">{currentSkin.name}</span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="w-56 bg-card border-border">
        <DropdownMenuLabel className="text-xs text-muted-foreground">Tema</DropdownMenuLabel>
        <DropdownMenuItem 
          onClick={() => setTheme('light')}
          className={cn("cursor-pointer", theme === 'light' && "bg-primary/10")}
        >
          <Sun className="w-4 h-4 mr-2" />
          Lys
          {theme === 'light' && <Check className="w-4 h-4 ml-auto" />}
        </DropdownMenuItem>
        <DropdownMenuItem 
          onClick={() => setTheme('dark')}
          className={cn("cursor-pointer", theme === 'dark' && "bg-primary/10")}
        >
          <Moon className="w-4 h-4 mr-2" />
          Mørk
          {theme === 'dark' && <Check className="w-4 h-4 ml-auto" />}
        </DropdownMenuItem>
        <DropdownMenuItem 
          onClick={() => setTheme('system')}
          className={cn("cursor-pointer", theme === 'system' && "bg-primary/10")}
        >
          <Monitor className="w-4 h-4 mr-2" />
          System
          {theme === 'system' && <Check className="w-4 h-4 ml-auto" />}
        </DropdownMenuItem>
        
        <DropdownMenuSeparator />
        <DropdownMenuLabel className="text-xs text-muted-foreground">Skin</DropdownMenuLabel>
        
        {(Object.keys(SKINS) as SkinId[]).map((skinId) => {
          const skinOption = SKINS[skinId];
          return (
            <DropdownMenuItem 
              key={skinId}
              onClick={() => setSkin(skinId)}
              className={cn("cursor-pointer flex items-center gap-3", skin === skinId && "bg-primary/10")}
            >
              <div 
                className="w-4 h-4 rounded-full border border-border/50"
                style={{ background: `hsl(${skinOption.colors.primary})` }}
              />
              <div className="flex-1">
                <div className="text-sm">{skinOption.name}</div>
                <div className="text-xs text-muted-foreground">{skinOption.description}</div>
              </div>
              {skin === skinId && <Check className="w-4 h-4 shrink-0" />}
            </DropdownMenuItem>
          );
        })}
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default ThemeToggle;