"use client";

import React from "react";
import { Hint } from "../Hint";
import { FieldContext } from "./FieldContext";
import { FieldLabel } from "./Label";
import { FormTooltip } from "./Tooltip";

const CLASS_ROOT = "form-field__description";

export interface DescriptionProps {
  hideLabel?: boolean;
  children?: React.ReactNode;
}

const Description: React.FC<DescriptionProps> = ({
  hideLabel = false,
  children,
}) => {
  const context = React.useContext(FieldContext);
  const controlId = context?.controlId ?? "";
  const tooltip = context?.tooltip;
  const hint = context?.hint;
  return (
    <div className={CLASS_ROOT}>
      {!hideLabel ? (
        <>
          <FieldLabel />
          <FormTooltip id={controlId}>{tooltip}</FormTooltip>
        </>
      ) : null}
      <Hint id={`${controlId}-hint`} className="form-field__hint">
        {hint}
      </Hint>
      {children}
    </div>
  );
};

export { Description };