import React, { ReactNode } from 'react'
import withDefaults from '../utils/with-defaults'

import { twMerge } from 'tailwind-merge'

interface Props {
  title?: ReactNode | string
  content?: ReactNode | string
  className?: string
  row?: boolean
}

const defaultProps = {
  title: 'Title' as ReactNode | string,
  content: '' as ReactNode | string,
  row: false as boolean,
  className: ''
}

type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type DescriptionProps = Props & typeof defaultProps & NativeAttrs

const Description: React.FC<DescriptionProps> = ({ title, content, row, className, ...props }) => {
  const dlClassName = row ? 'sm:flex sm:flex-wrap gap-2 items-center h-[3ch]' : ''
  return (
    <dl className={twMerge('mb-4', dlClassName, className)} {...props}>
      <dt className=" text-grayscale-10 min-w-min">{title}</dt>
      <dd className="text-grayscale-12 dark:text-grayscale-4 tracking-wide">{content}</dd>
    </dl>
  )
}

const MemoDescription = React.memo(Description)

export default withDefaults(MemoDescription, defaultProps)