import { Fragment } from "react";

/** A practice's permanent web address once held: the read-only field, which breaks only between labels. */
export const PracticeAddressHeld = ({ hostname }: { hostname: string }) => {
  const labels = hostname.split(".");
  return (
    <div className="space-y-1">
      <div className="ak-label">Permanent practice web address</div>
      <div className="practice-address__held" data-testid="practice-address-held">
        {labels.map((label, i) => (
          <Fragment key={i}>
            <span className="practice-address__host-label">{i < labels.length - 1 ? `${label}.` : label}</span>
            {i < labels.length - 1 && <wbr />}
          </Fragment>
        ))}
      </div>
      <div className="ak-field-help">Saved · cannot be changed</div>
    </div>
  );
};