import { forwardRef } from 'react'
import type { HTMLAttributes, ReactNode } from 'react'
import { cn } from '@/lib/utils'

export interface UserMessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
  children: ReactNode
  maxWidth?: string | number
}

export const UserMessage = forwardRef<HTMLDivElement, UserMessageProps>(
  ({ children, className, maxWidth = '752px', ...props }, ref) => {
    const containerStyles = cn(
      'w-full',
      'bg-sage-bg',
      'rounded-lg',
      'p-3',
      'text-sm leading-sm',
      'font-normal',
      'text-text',
      className
    )

    return (
      <div
        ref={ref}
        className={containerStyles}
        style={{
          maxWidth: typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
        }}
        {...props}
      >
        {children}
      </div>
    )
  }
)

UserMessage.displayName = 'UserMessage'