type Size = "nav" | "footer" | "hero";

interface FFLogoProps {
  size?: Size;
  className?: string;
}

const sizes: Record<Size, { ff: string; sep: string; sub: string; subSize: string; subLetter: string; subPadding: string }> = {
  nav: {
    ff: "text-[28px] tracking-[-1.4px]",
    sep: "w-[18px] my-[3px_auto_2px]",
    sub: "text-[7px] tracking-[4.5px] pl-[4.5px]",
    subSize: "7px",
    subLetter: "4.5px",
    subPadding: "4.5px",
  },
  footer: {
    ff: "text-[48px] tracking-[-2.5px]",
    sep: "w-[28px]",
    sub: "text-[9px] tracking-[7px] pl-[7px]",
    subSize: "9px",
    subLetter: "7px",
    subPadding: "7px",
  },
  hero: {
    ff: "text-[72px] tracking-[-3px]",
    sep: "w-[40px]",
    sub: "text-[12px] tracking-[9px] pl-[9px]",
    subSize: "12px",
    subLetter: "9px",
    subPadding: "9px",
  },
};

export function FFLogo({ size = "nav", className = "" }: FFLogoProps) {
  const s = sizes[size];

  return (
    <div className={`inline-block text-center leading-none ${className}`}>
      <div className={`font-sans font-bold text-fg ${s.ff}`}>FF</div>
      <div
        className={`h-px bg-accent mx-auto ${s.sep}`}
        style={{ margin: size === "nav" ? "3px auto 2px" : size === "footer" ? "6px auto 4px" : "10px auto 6px" }}
      />
      <div
        className="font-sans font-normal uppercase text-fg"
        style={{
          fontSize: s.subSize,
          letterSpacing: s.subLetter,
          paddingLeft: s.subPadding,
        }}
      >
        COACHING
      </div>
    </div>
  );
}