'use client';
import { useParams } from 'next/navigation';
import { useApi } from '@/hooks/useApi';
import { storeService } from '@/services/store.service';
import { themeService } from '@/services/theme.service';
import { StoreThemeProvider } from '@/components/store/StoreThemeProvider';
import { StoreHeader } from '@/components/store/StoreHeader';
import { StoreFooter } from '@/components/store/StoreFooter';
import { WhatsAppButton } from '@/components/store/WhatsAppButton';
import { LoadingState, EmptyState } from '@/components/ui/States';

export default function LojaLayout({ children }: { children: React.ReactNode }) {
  const params = useParams();
  const slug = params.slug as string;

  const { data: store, loading: ls } = useApi(() => storeService.getBySlug(slug), [slug]);
  const { data: theme, loading: lt } = useApi(
    () => (store ? themeService.get(store.id) : Promise.resolve(null)),
    [store?.id],
  );

  if (ls || lt) {
    return <div className="flex min-h-screen items-center justify-center"><LoadingState label="Carregando loja..." /></div>;
  }
  if (!store || !theme) {
    return <div className="flex min-h-screen items-center justify-center"><EmptyState title="Loja não encontrada" description="Verifique o endereço e tente novamente." /></div>;
  }

  return (
    <StoreThemeProvider store={store} theme={theme}>
      <StoreHeader />
      <main className="mx-auto max-w-5xl px-4">{children}</main>
      <StoreFooter />
      <WhatsAppButton />
    </StoreThemeProvider>
  );
}