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

export function Field({
  label,
  hint,
  right,
  required,
  children,
  className,
  compact = false,
}: {
  label?: string;
  hint?: string;
  right?: JSX.Element | null;
  required?: boolean;
  children: ComponentChildren;
  className?: string;
  compact?: boolean;
}) {
  return (
    <div className={cn('ask-flex ask-flex-col', compact ? 'ask-gap-1.5' : 'ask-gap-2', className)}>
      {(label || right) && (
        <div className="ask-flex ask-items-center ask-justify-between">
          {label ? (
            <div
              className={cn(
                'ask-font-medium ask-text-textMain',
                compact ? 'ask-text-[11px]' : 'ask-text-[12px]',
              )}
            >
              {label}
              {required ? (
                <span className="ask-ml-1 ask-text-red-500" aria-hidden="true">
                  *
                </span>
              ) : null}
            </div>
          ) : (
            <div />
          )}
          {right}
        </div>
      )}
      {children}
      {hint ? (
        <div
          className={cn(
            'ask-text-textMuted',
            compact ? 'ask-text-[10px] ask-leading-4' : 'ask-text-[11px]',
          )}
        >
          {hint}
        </div>
      ) : null}
    </div>
  );
}
