import { useI18n } from '~/src/lib/i18n';
import { Layout } from '~/src/ui/layouts/layout';
import { Text } from '~/src/ui/primitives/text';

interface FormLabelProps {
  label: string;
  name: string;
  flagOptional?: boolean;
}

export const FormLabel = ({ label, name, flagOptional }: FormLabelProps) => {
  const { t } = useI18n();

  return (
    <label htmlFor={name}>
      <Layout gap="2" align="center">
        <Text variant="body-small">{label}</Text>
        {flagOptional && (
          <Text variant="subtext">{t('app.labels.optional')}</Text>
        )}
      </Layout>
    </label>
  );
};