import type { CSSProperties } from 'react';

export const BRAND_NAME = 'Nudentic';

/** Light-theme primary — use in print/PDF where theme tokens are unsafe. */
export const BRAND_PRIMARY_HEX = '#009cae';

type BrandWordmarkProps = {
  className?: string;
  style?: CSSProperties;
  /**
   * i-dot color. Omit to use the theme primary token.
   * Pass a hex (e.g. `BRAND_PRIMARY_HEX`) for print/PDF capture.
   */
  dotColor?: string;
};

function BrandI({ fill }: { fill: string }) {
  return (
    <svg
      aria-hidden
      viewBox="0 0 24 80"
      className="inline-block h-[0.78em] w-[0.26em] overflow-visible align-baseline ms-[0.05em] me-[0.04em]"
    >
      <circle cx="12" cy="10" r="8" fill={fill} />
      <rect x="6" y="28" width="12" height="52" rx="1.2" fill="currentColor" />
    </svg>
  );
}

export function BrandWordmark({ className, style, dotColor }: BrandWordmarkProps) {
  const tittleFill = dotColor ?? 'var(--color-primary)';

  return (
    <span dir="ltr" className={className} style={style}>
      <span className="sr-only">{BRAND_NAME}</span>
      <span aria-hidden>
        Nudent
        <BrandI fill={tittleFill} />
        c
      </span>
    </span>
  );
}
