import React from 'react';

import type { FieldSuffixProps } from '@shoptet/ui-core-web';
import { Field as CoreField } from '@shoptet/ui-core-web';
import type { Exact, SafePick } from '@shoptet/utils';

import type { OmitPrivate } from '../../types';

export interface FieldLabelAfterInheritedSpanProps extends OmitPrivate<React.HTMLAttributes<HTMLSpanElement>> {}

export interface FieldLabelAfterProps extends SafePick<FieldSuffixProps, 'label'>, FieldLabelAfterInheritedSpanProps {
  children: React.ReactNode;
}

export function FieldLabelAfter({ label, children, ...rest }: FieldLabelAfterProps) {
  rest satisfies Exact<FieldLabelAfterInheritedSpanProps, typeof rest>;

  return (
    <CoreField.Suffix className='v2FormField__labelAfter' label={label} {...rest}>
      {children}
    </CoreField.Suffix>
  );
}