import { useTheme } from '../context/ThemeContext';
import { Palette } from 'lucide-react';

export default function DesignSwitch() {
    const { theme, setTheme } = useTheme();

    return (
        <button
            onClick={() => setTheme(theme === 'default' ? 'aspirant' : 'default')}
            className={`flex items-center gap-2 px-3 py-2 rounded-md transition-colors duration-fast text-sm font-medium
                ${theme === 'aspirant'
                    ? 'text-[var(--color-primary)] bg-[var(--color-primary-soft)]'
                    : 'text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)]'
                }`}
            title="Switch Design Theme"
        >
            <Palette size={16} />
            <span className="hidden sm:inline text-xs">{theme === 'aspirant' ? 'Aspirant' : 'Classic'}</span>
        </button>
    );
}