import { type ReactNode } from "react"

import { useBrand } from "~/lib/identity"

export function AuthShell({ children }: { children: ReactNode }) {
  return (
    <div
      className="dark relative isolate flex min-h-svh items-center justify-center p-4"
      style={{ background: "var(--background)" }}
    >
      {children}
    </div>
  )
}

export function AuthBrand() {
  const brand = useBrand()
  const BrandIcon = brand.icon
  return (
    <div className="flex items-center gap-2">
      <span
        className="flex size-8 items-center justify-center rounded-lg"
        style={{
          background: "var(--primary)",
          color: "var(--primary-foreground)",
        }}
      >
        <BrandIcon className="size-4" />
      </span>
      <span className="text-sm font-semibold">{brand.name}</span>
    </div>
  )
}