import { useMemo, ReactNode } from "react";
import { useTenant, hexToHsl } from "@/contexts/TenantContext";
import LocktelNavbar from "./LocktelNavbar";
import LocktelFooter from "./LocktelFooter";

const LocktelLayout = ({ children }: { children: ReactNode }) => {
  const { branding } = useTenant();

  const brandingStyles = useMemo(() => {
    if (!branding) return {};
    const vars: Record<string, string> = {};
    const set = (prop: string, hex: string | null) => {
      if (!hex) return;
      const hsl = hexToHsl(hex);
      if (hsl) vars[prop] = hsl;
    };
    set("--background", branding.background_color);
    set("--foreground", branding.font_color);
    set("--secondary", branding.secondary_color);
    set("--card", branding.card_color);
    set("--card-foreground", branding.card_font_color);
    return vars;
  }, [branding]);

  return (
    <div className="min-h-screen bg-background overflow-x-hidden" style={brandingStyles as React.CSSProperties}>
      <LocktelNavbar />
      <main>{children}</main>
      <LocktelFooter />
    </div>
  );
};

export default LocktelLayout;