'use client'

import type { ReactNode } from 'react'

import { Description, FieldError, Label } from '@heroui/react'

import { CONSUMER_FIELD_DESCRIPTION_CLASS, CONSUMER_FIELD_LABEL_CLASS } from '@/components/consumer/input/consumerInputStyles'
import { buildOutsideLabel } from '@/components/formElements/input/inputUtils'
import { cn } from '@/lib/cn'

interface Props {
  children: ReactNode
  className?: string
  description?: ReactNode
  errorMessage?: string
  invalid?: boolean
  label?: string
  labelIcon?: ReactNode
  required?: boolean
}

export default function ConsumerFieldShell({
  children,
  className,
  description,
  errorMessage,
  invalid,
  label,
  labelIcon = null,
  required,
}: Props) {
  return (
    <div className={cn('flex min-w-0 w-full flex-col gap-1', className)}>
      {label ? (
        <Label className={cn(CONSUMER_FIELD_LABEL_CLASS, invalid && '!text-fourth')}>{buildOutsideLabel(label, labelIcon, required)}</Label>
      ) : null}
      {children}
      {description ? <Description className={CONSUMER_FIELD_DESCRIPTION_CLASS}>{description}</Description> : null}
      {invalid && errorMessage ? <FieldError>{errorMessage}</FieldError> : null}
    </div>
  )
}