---
to: <%- route -%>.tsx
---
import { useSignal } from '@preact/signals-react';
import type { Signal } from '@preact/signals-react';
import React, { createContext, useContext } from 'react';

export interface CounterContextType {
  count: Signal<number>;
  decrement: () => void;
  increment: () => void;
  setCount: (count: number) => void;
}

export interface CounterProviderProps {
  children?: React.ReactNode;
  initialCount: number;
}

const CounterContext = createContext<CounterContextType | undefined>(undefined);
CounterContext.displayName = 'CounterContext';

export function useCounterContext(): CounterContextType {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error('useCounterContext must be used within a CounterContextProvider');
  }

  return context;
}

function CounterContextProvider({
  children,
  initialCount,
}: CounterProviderProps): React.ReactNode {
  const count = useSignal(initialCount || 0);

  const increment = () => {
    count.value += 1;
  };

  const decrement = () => {
    count.value -= 1;
  };

  const setCount = (value: number) => {
    count.value = value;
  };

  const api = {
    count,
    decrement,
    increment,
    setCount,
  };

  return (
    <CounterContext.Provider value={api}>{children}</CounterContext.Provider>
  );
}

CounterContextProvider.displayName = 'CounterContextProvider';

export default CounterContextProvider;