'use client';
import { useAuth } from '@/hooks/useAuth';
import { useApi } from '@/hooks/useApi';
import { categoriesService } from '@/services/categories.service';
import { ProductForm } from '@/components/forms/ProductForm';
import { PageHeader } from '@/components/layout/PageHeader';
import { LoadingState } from '@/components/ui/States';

export default function NovoProdutoPage() {
  const { storeId } = useAuth();
  const { data: categories, loading } = useApi(
    () => (storeId ? categoriesService.list(storeId) : Promise.resolve([])),
    [storeId],
  );
  if (loading || !storeId) return <LoadingState />;
  return (
    <>
      <PageHeader title="Novo produto" subtitle="Preencha os dados do produto" />
      <ProductForm storeId={storeId} categories={categories ?? []} />
    </>
  );
}