import TableContentItem from '../TableContentItem';
function DetailModalItem({ data, tableHeader, rowPropsBase = null, className = null, index = null }) {
  const defaultRowProps = {
    wrapperClassName: rowPropsBase?.wrapperClassName ?? 'flex flew-row flex-wrap justify-between',
    labelClassName: rowPropsBase?.labelClassName ?? "flex-1 font-medium text-sm md:text-base",
    valueClassName: rowPropsBase?.valueClassName ?? "text-sm md:text-base",
    emptyCheck: rowPropsBase?.emptyCheck ?? false
  }

  return (
    <div className={`${className ?? "flex flex-col w-full max-h-[60vh] overflow-auto scrollbar-thin pr-2"}`}>
      {tableHeader.map((header, i) => (
        <TableContentItem
          key={i}
          header={header}
          item={data}
          index={index}
          variant="modal"
          {...defaultRowProps}
        />
      ))}
    </div>
  )
}

export default DetailModalItem
