import type { ComponentChildren, JSX } from 'preact';
import { cn } from './cn';

export type PropertyRowProps = JSX.HTMLAttributes<HTMLDivElement> & {
  label: ComponentChildren;
  value?: ComponentChildren;
  description?: ComponentChildren;
  left?: ComponentChildren;
  right?: ComponentChildren;
};

export function PropertyRow({ className, label, value, description, left, right, children, ...props }: PropertyRowProps) {
  return (
    <div className={cn('ask-property-row ask-flex ask-items-start ask-justify-between ask-gap-3', className)} {...props}>
      <div className="ask-min-w-0 ask-flex ask-items-start ask-gap-2">
        {left ? <span className="ask-flex ask-shrink-0 ask-items-center ask-justify-center">{left}</span> : null}
        <div className="ask-min-w-0">
          <div className="ask-text-[12px] ask-font-medium ask-text-textMain">{label}</div>
          {description ? <div className="ask-mt-0.5 ask-text-[11px] ask-leading-5 ask-text-textMuted">{description}</div> : null}
          {children}
        </div>
      </div>
      {right || value ? (
        <div className="ask-shrink-0 ask-text-right ask-text-[12px] ask-font-medium ask-text-textMuted">
          {right ?? value}
        </div>
      ) : null}
    </div>
  );
}
