import type { ReactNode } from "react";

export function LocationDisplayName({
  name,
  detailClassName = "text-[0.68em] font-semibold opacity-85",
}: {
  name: string;
  detailClassName?: string;
}) {
  const match = name.match(/^(.*?)\s*(\(.+\))$/);

  if (!match) {
    return <>{name}</>;
  }

  return (
    <>
      {match[1]}
      <span className={detailClassName}> {match[2]}</span>
    </>
  );
}

export function renderLocationName(name: string | null | undefined): ReactNode {
  return name ? <LocationDisplayName name={name} /> : null;
}