"use client";

import type { PropsWithChildren } from "react";
import Link from "next/link";
import { Locale } from "@/config/i18n";
import { LanguageSwitch } from "@/components/shared/LanguageSwitch";
import { ThemeToggle } from "@/components/shared/ThemeToggle";
import { Button } from "@/components/ui/Button";
import { useMockAuth } from "@/providers/auth/MockAuthProvider";

export function PublicShell({ children, locale }: PropsWithChildren<{ locale?: Locale }>) {
  const { user, logout } = useMockAuth();

  return (
    <main
      style={{
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        gap: 24,
        fontFamily: "var(--font-sans)",
        padding: 40
      }}
    >
      <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
        <LanguageSwitch locale={locale} />
        <ThemeToggle />
        {user ? (
          <Button
            type="button"
            onClick={logout}
            style={{ background: "transparent", color: "var(--color-muted)", border: "1px solid rgba(0,0,0,0.12)" }}
          >
            Sign out
          </Button>
        ) : (
          <Link
            href={`/${locale ?? "en"}/login`}
            style={{
              padding: "8px 16px",
              borderRadius: 999,
              border: "1px solid rgba(0,0,0,0.12)",
              color: "var(--color-foreground)"
            }}
          >
            Log in
          </Link>
        )}
      </div>
      <div style={{ maxWidth: 720, textAlign: "center" }}>{children}</div>
    </main>
  );
}
