'use client';

import * as React from 'react';

// Define the shape of our tone context
type Tone = 'direct' | 'clean';

interface ToneContextType {
  tone: Tone;
  toggleTone: () => void;
}

// Create the context with a default value
const ToneContext = React.createContext<ToneContextType | undefined>(undefined);

// Provider component
export function ToneProvider({ children }: { children: React.ReactNode }) {
  const [tone, setTone] = React.useState<Tone>('direct'); // Default to 'direct'

  const toggleTone = () => {
    setTone((prevTone) => (prevTone === 'direct' ? 'clean' : 'direct'));
  };

  return (
    <ToneContext.Provider value={{ tone, toggleTone }}>
      {children}
    </ToneContext.Provider>
  );
}

// Custom hook to use the tone context
export function useTone() {
  const context = React.useContext(ToneContext);
  if (context === undefined) {
    throw new Error('useTone must be used within a ToneProvider');
  }
  return context;
}