"use client";

import { createContext, useContext, useState, type ReactNode } from "react";

// Formato (tamanho) escolhido na página da obra, compartilhado entre o seletor de formato e a galeria,
// para que as simulações na parede acompanhem o tamanho que o cliente está vendo.
type Ctx = { sizeId: string; setSizeId: (id: string) => void };
const FormatoCtx = createContext<Ctx | null>(null);

export function FormatoProvider({ initial, children }: { initial: string; children: ReactNode }) {
  const [sizeId, setSizeId] = useState(initial);
  return <FormatoCtx.Provider value={{ sizeId, setSizeId }}>{children}</FormatoCtx.Provider>;
}

export function useFormato(fallback: string): Ctx {
  const ctx = useContext(FormatoCtx);
  const [local, setLocal] = useState(fallback);
  return ctx ?? { sizeId: local, setSizeId: setLocal };
}