"use client";

import Link from "next/link";

import { useShallow } from "zustand/react/shallow";

import { OxyfinzLogo } from "@/components/brand/oxyfinz-logo";
import {
  Sidebar,
  SidebarFooter,
  SidebarHeader,
} from "@/components/ui/sidebar";
import { usePreferencesStore } from "@/stores/preferences/preferences-provider";

type SidebarShellProps = React.ComponentProps<typeof Sidebar> & {
  homeHref: string;
  /** `undefined` = default brand header; `null` = omit header (caller supplies chrome). */
  header?: React.ReactNode | null;
  /** When omitted, no footer chrome is rendered (caller may place footer inside children). */
  footer?: React.ReactNode;
  children: React.ReactNode;
};

export function SidebarShell({
  homeHref,
  header,
  footer,
  children,
  ...props
}: SidebarShellProps) {
  const { sidebarVariant, sidebarCollapsible, isSynced } = usePreferencesStore(
    useShallow((s) => ({
      sidebarVariant: s.sidebarVariant,
      sidebarCollapsible: s.sidebarCollapsible,
      isSynced: s.isSynced,
    })),
  );

  const variant = isSynced ? sidebarVariant : props.variant;
  const collapsible = isSynced ? sidebarCollapsible : props.collapsible;

  return (
    <Sidebar {...props} variant={variant} collapsible={collapsible}>
      {header === undefined ? (
        <SidebarHeader className="px-3 py-3">
          <Link prefetch={false} href={homeHref} className="inline-flex items-center">
            <OxyfinzLogo />
          </Link>
        </SidebarHeader>
      ) : (
        header
      )}
      {children}
      {footer != null ? <SidebarFooter>{footer}</SidebarFooter> : null}
    </Sidebar>
  );
}