import { cva, type VariantProps } from 'class-variance-authority'
import type * as React from 'react'
import { cn } from '../../utils/cn'
import { typographyVariants } from '../Typography'

const helperVariants = cva('', {
  variants: {
    size: {
      default: typographyVariants({
        variant: 'body-s',
        color: 'muted-more',
      }),
      sm: typographyVariants({ variant: 'body-xs', color: 'muted-more' }),
      xs: typographyVariants({ variant: 'body-xs', color: 'muted-more' }),
    },
  },
  defaultVariants: {
    size: 'default',
  },
})

type HelperProps = React.HTMLAttributes<HTMLDivElement> &
  VariantProps<typeof helperVariants> & {
    ref?: React.Ref<HTMLDivElement>
  }

const Helper = ({ className, size, ref, ...props }: HelperProps) => (
  <div
    ref={ref}
    className={cn(helperVariants({ size }), className)}
    {...props}
  />
)
Helper.displayName = 'Helper'

export { Helper }