import { cva, type VariantProps } from 'class-variance-authority';
import { DISABLED_OPACITY } from '../../styles/constants';

export const fieldRootVariants = cva(['group flex-col gap-2', 'web:last:mb-0', DISABLED_OPACITY]);

export const fieldLabelVariants = cva([
  'body-md',
  'font-medium',
  'text-content-primary',
  'flex-row items-center',
  'overflow-hidden',
  'web:cursor-pointer',
  'web:group-has-[[data-focus=true]]:data-[invalid=false]:text-content-action',
  'data-[invalid=true]:text-content-danger',
]);

export const fieldHelperVariants = cva(['flex-row items-center min-h-4']);

export const fieldHelperTextVariants = cva(['body-sm', 'text-content-tertiary']);

export const fieldErrorVariants = cva(['flex-row items-center gap-0.5 min-h-4']);

export const fieldErrorTextVariants = cva(['body-sm', 'text-content-danger']);

export const fieldErrorIconVariants = cva(['size-3.5', 'text-content-danger']);

export type FieldRootVariantProps = VariantProps<typeof fieldRootVariants>;
export type FieldLabelVariantProps = VariantProps<typeof fieldLabelVariants>;
export type FieldHelperVariantProps = VariantProps<typeof fieldHelperVariants>;
export type FieldHelperTextVariantProps = VariantProps<typeof fieldHelperTextVariants>;
export type FieldErrorVariantProps = VariantProps<typeof fieldErrorVariants>;
export type FieldErrorTextVariantProps = VariantProps<typeof fieldErrorTextVariants>;
export type FieldErrorIconVariantProps = VariantProps<typeof fieldErrorIconVariants>;