import { type ReactElement } from "react";
import * as React from "react";
import { cn } from "@/lib/utils";

export type LabelProps = React.ComponentProps<"label"> & {
  /** When true, renders a red asterisk after the label text to indicate a required field */
  required?: boolean;
};

function Label({
  className,
  required,
  children,
  ...props
}: LabelProps): ReactElement {
  return (
    // eslint-disable-next-line jsx-a11y/label-has-associated-control -- htmlFor is passed by the consumer
    <label
      className={cn(
        "flex items-center gap-2 text-label-medium leading-none select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
        className,
      )}
      data-slot="label"
      {...props}
    >
      {children}
      {required && (
        <span aria-hidden="true" className="text-destructive">
          *
        </span>
      )}
    </label>
  );
}

export { Label };