import { useSettings } from '@/state/useSettings';
import { themes } from 'themes';

export const Appearance = () => {
  const { settings, saveSettings } = useSettings();

  const handleColorThemeChange = (colorTheme: string) => {
    saveSettings({ ...settings, appearance: { ...settings.appearance, colorTheme } });
  };

  const activeColorTheme = settings.appearance.colorTheme ?? 'DuckPond';

  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 pt-2">
      {themes.map((t) => (
        <button
          key={t.id}
          type="button"
          onClick={() => handleColorThemeChange(t.id)}
          className={`rounded-md px-3 py-2.5 text-sm font-medium cursor-pointer transition-colors ${
            activeColorTheme === t.id
              ? 'bg-duck-teal text-white ring-2 ring-duck-teal/50'
              : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
          }`}
        >
          {t.name}
        </button>
      ))}
    </div>
  );
};