'use client';
import { Monitor, Sun, Moon } from 'lucide-react';
import { useBrandTheme } from './BrandTheme';
import styles from './theme.module.css';
export default function ThemeControl() {
  const { theme, setTheme } = useBrandTheme();
  return (
    <div className={styles.themeSwitch} role="group" aria-label="Display theme">
      {(
        [
          { name: 'system', icon: Monitor },
          { name: 'light', icon: Sun },
          { name: 'dark', icon: Moon },
        ] as const
      ).map(({ name, icon: Icon }) => (
        <button
          key={name}
          type="button"
          aria-label={`Use ${name} theme`}
          aria-pressed={theme === name}
          onClick={() => setTheme(name)}
          title={`${name[0].toUpperCase()}${name.slice(1)} theme`}
        >
          <Icon />
        </button>
      ))}
    </div>
  );
}