import { Box, BoxProps, styled, useTheme } from '@mui/material'
import LabelValue from './LabelValue'
import { ReactNode } from 'react'

interface DetailsGridProps {
  colCount: number
  inverseLabels?: boolean
  list: { label: ReactNode; value?: ReactNode }[]
  noBorder?: boolean
  space?: number
}

const StyledGrid = styled(Box, {
  shouldForwardProp: (prop) => prop !== 'noBorder',
})<{ cols: number; noBorder: boolean; space: number }>(
  ({ theme, cols, noBorder, space }) => ({
    padding: noBorder ? '1rem' : '20px',
    marginTop: noBorder ? 0 : '1rem',
    border: noBorder ? 'none' : theme.borders.grayLight,
    display: 'grid',
    gridTemplateColumns: `repeat(${cols}, 1fr)`,
    gap: `${space}px`,
    borderRadius: '10px',
    [`& > :not(:nth-of-type(${cols}n))`]: {
      borderRight: theme.borders.grayLight,
    },
    '& > :last-child': {
      borderRight: 'none',
    },
  }),
)

export default function DetailsGrid({
  colCount,
  inverseLabels = false,
  list,
  noBorder = false,
  space = 16,
}: DetailsGridProps) {
  return (
    <StyledGrid cols={colCount} space={space} noBorder={noBorder}>
      {list?.map((item, index) => (
        <LabelValue
          reverse={inverseLabels}
          label={item?.label}
          value={item?.value}
          key={index}
        />
      ))}
    </StyledGrid>
  )
}
