// Рекомендуемый способ — явная типизация props:
interface ButtonProps {
  label: string
  onClick: () => void
  variant?: 'primary' | 'secondary'
  disabled?: boolean
  children: React.ReactNode
}

function Button({ label, onClick, variant = 'primary', disabled }: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  )
}

// React.FC<Props> — устаревший стиль, имеет нюансы:
// - неявно добавлял children (исправлено в React 18)
// - несколько хуже работает с generics
const Button2: React.FC<ButtonProps> = ({ label, onClick }) => { ... }

interface CardProps {
  title: string
  children: React.ReactNode  // строка, JSX, массив, null — всё подходит
}

// Альтернативы:
// React.ReactElement — только JSX элементы
// JSX.Element        — синоним ReactElement
// string             — только строки

function Form() {
  // Кнопка
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault()
    console.log('clicked')
  }

  // Инпут
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value)
  }

  // Форма
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
  }

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} />
      <button onClick={handleClick}>Submit</button>
    </form>
  )
}

// useState — тип выводится из начального значения
const [name, setName] = useState('')             // string
const [count, setCount] = useState(0)            // number
const [user, setUser] = useState<User | null>(null) // явный тип нужен

// useRef — DOM элемент
const inputRef = useRef<HTMLInputElement>(null)
// inputRef.current может быть null до монтирования

// useRef — изменяемое значение (не DOM)
const timerRef = useRef<number | null>(null)
timerRef.current = setTimeout(() => {}, 1000)

// useReducer с типами
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'reset'; payload: number }

interface State { count: number }

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 }
    case 'decrement': return { count: state.count - 1 }
    case 'reset':     return { count: action.payload }
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 })
dispatch({ type: 'reset', payload: 10 })  // payload обязателен!

function useLocalStorage<T>(key: string, initialValue: T): [T, (value: T) => void] {
  const [stored, setStored] = useState<T>(() => {
    try {
      const item = localStorage.getItem(key)
      return item ? JSON.parse(item) : initialValue
    } catch {
      return initialValue
    }
  })

  const setValue = (value: T) => {
    setStored(value)
    localStorage.setItem(key, JSON.stringify(value))
  }

  return [stored, setValue]
}

// Использование:
const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light')

interface ThemeContextType {
  theme: 'light' | 'dark'
  toggle: () => void
}

const ThemeContext = createContext<ThemeContextType | null>(null)

function useTheme(): ThemeContextType {
  const ctx = useContext(ThemeContext)
  if (!ctx) throw new Error('useTheme must be used within ThemeProvider')
  return ctx
}

interface InputProps {
  placeholder?: string
  value: string
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
}

const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ placeholder, value, onChange }, ref) => (
    <input ref={ref} placeholder={placeholder} value={value} onChange={onChange} />
  )
)