dify/web/app/components/base/form/components/label.tsx

import { cn } from '@langgenius/dify-ui/cn'
import { useTranslation } from 'react-i18next'
import { Infotip } from '../../infotip'

export type LabelProps = {
  htmlFor: string
  label: string
  isRequired?: boolean
  showOptional?: boolean
  tooltip?: string
  className?: string
}

const Label = ({ htmlFor, label, isRequired, showOptional, tooltip, className }: LabelProps) => {
  const { t } = useTranslation()

  return (
    <div className="flex h-6 items-center">
      <label
        data-testid="label"
        htmlFor={htmlFor}
        className={cn('system-sm-medium text-text-secondary', className)}
      >
        {label}
      </label>
      {!isRequired && showOptional && (
        <div className="ml-1 system-xs-regular text-text-tertiary">
          {t(($) => $['label.optional'], { ns: 'common' })}
        </div>
      )}
      {isRequired && (
        <div className="ml-1 system-xs-regular text-text-destructive-secondary">*</div>
      )}
      {tooltip && (
        <Infotip aria-label={tooltip} className="ml-0.5 size-4" popupClassName="w-[200px]">
          {tooltip}
        </Infotip>
      )}
    </div>
  )
}

export default Label