shoc-frontend-new/src/components/common/brand-lockup.tsx

import type { ComponentPropsWithoutRef } from "react";

import { SeahavenMark } from "@/components/common/seahaven-mark";
import { cn } from "@/lib/utils";

type BrandLockupSize = "default" | "compact";

export type BrandMarkProps = ComponentPropsWithoutRef<"div"> & {
  size?: BrandLockupSize;
};

export function BrandMark({ size = "default", className, ...props }: BrandMarkProps) {
  return (
    <div
      className={cn(
        "flex shrink-0 items-center justify-center bg-linear-to-br from-accent to-primary text-white shadow-(--shadow-brand-mark)",
        size === "compact" ? "h-[26px] w-[26px] rounded-[7px]" : "h-[30px] w-[30px] rounded-lg",
        className,
      )}
      {...props}
    >
      <SeahavenMark className={size === "compact" ? "h-4 w-4" : "h-[18px] w-[18px]"} />
    </div>
  );
}

export type BrandWordmarkProps = ComponentPropsWithoutRef<"div"> & {
  size?: BrandLockupSize;
};

export function BrandWordmark({ size = "default", className, ...props }: BrandWordmarkProps) {
  return (
    <div className={cn("leading-none", className)} {...props}>
      <div
        className={cn(
          "font-display font-extrabold tracking-[0.04em] text-foreground",
          size === "compact" ? "text-md" : "text-[16px]",
        )}
      >
        SEA HAVEN
      </div>
      <div
        className={cn(
          "mt-[3px] font-mono font-semibold tracking-[0.16em] text-muted-foreground",
          size === "compact" ? "text-[7.5px]" : "text-[8px]",
        )}
      >
        OPERATIONS CONSOLE
      </div>
    </div>
  );
}

export type BrandLockupProps = ComponentPropsWithoutRef<"div"> & {
  size?: BrandLockupSize;
};

export function BrandLockup({ className, size = "default", ...props }: BrandLockupProps) {
  return (
    <div className={cn("flex items-center justify-center gap-2.5", className)} {...props}>
      <BrandMark size={size} />
      <BrandWordmark size={size} />
    </div>
  );
}