import React from 'react'
import { cn } from '../lib/utils'

type Weight = 'normal' | 'medium' | 'semibold' | 'bold'

interface pProps extends React.HTMLAttributes<HTMLSpanElement> {
  weight?: Weight
  numberOfLines?: number
  style?: React.CSSProperties
}

const weightClasses: Record<Weight, string> = {
  normal: 'font-normal',
  medium: 'font-medium',
  semibold: 'font-semibold',
  bold: 'font-bold',
}

export function p({
  children,
  weight = 'normal',
  numberOfLines,
  className,
  style,
  ...props
}: pProps) {
  return (
    <span
      className={cn(weightClasses[weight], className)}
      style={{
        ...(numberOfLines
          ? {
              display: '-webkit-box',
              WebkitLineClamp: numberOfLines,
              WebkitBoxOrient: 'vertical',
              overflow: 'hidden',
            }
          : {}),
        ...style,
      }}
      {...props}
    >
      {children}
    </span>
  )
}
