// @ts-nocheck

import { useId } from "react";
import cn from "../utils/cn";
import Tooltip from "./Tooltip";

const Label = ({ htmlFor = "", children, tooltipContent, className }) => {
  const tooltipId = useId();

  return (
    <div className="ino:flex ino:items-center ino:gap-1.5">
      <label
        htmlFor={htmlFor}
        className={cn("ino:text-foreground ino:text-base", className)}
      >
        {children}
      </label>
      {tooltipContent && (
        <>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={1.5}
            stroke="currentColor"
            className="ino:size-4 ino:shrink-0 ino:cursor-help ino:text-muted-foreground ino:transition-colors ino:outline-none ino:hover:text-foreground information-icon"
            data-tooltip-id={tooltipId}
            data-tooltip-content={tooltipContent}
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
            />
          </svg>
          <Tooltip id={tooltipId} />
        </>
      )}
    </div>
  );
};
export default Label;