import { classNames } from '../../lib/utils';

/**
 * The bar under a title or description: how long it is against the range
 * Google shows, green inside the range, amber when short, red when cut.
 */
export const LengthBar = ({
  length,
  min,
  max,
  pixels,
  maxPixels,
}: {
  length: number;
  min: number;
  max: number;
  /** The rendered width, when measured, judged against maxPixels. */
  pixels?: number;
  maxPixels?: number;
}): JSX.Element => {
  const measured =
    pixels !== undefined && maxPixels !== undefined && pixels > 0;
  const percent = Math.min(
    100,
    Math.round(
      measured ? (pixels / (maxPixels as number)) * 100 : (length / max) * 100
    )
  );
  const cut = measured ? pixels > (maxPixels as number) : length > max;
  const tone =
    length === 0
      ? 'bg-muted-foreground/30'
      : cut
        ? 'bg-red-500'
        : length < min
          ? 'bg-amber-500'
          : 'bg-emerald-500';
  return (
    <div className="flex items-center gap-2">
      <div className="h-1 flex-1 overflow-hidden rounded-full bg-muted">
        <div
          className={classNames('h-full rounded-full transition-all', tone)}
          style={{ width: `${percent}%` }}
        />
      </div>
      <span
        className="text-[11px] tabular-nums text-muted-foreground"
        title={
          measured
            ? `${pixels} of the ${maxPixels} pixels Google shows`
            : undefined
        }
      >
        {length} / {max}
        {measured && (
          <span className={classNames(cut && 'text-red-600')}>
            {' '}
            · {pixels} / {maxPixels} px
          </span>
        )}
      </span>
    </div>
  );
};