cards.jsx

import React, { Component, Children, cloneElement } from 'react'
import PropTypes from 'prop-types'
import createStyledElement from 'create-styled-element'

import Box from '../Box'
import Flex from '../Flex'

function Card({ row, subdued, ...props }) {
  return (
    <Flex
      width={'100%'}
      direction={row ? 'row' : 'column'}
      radius={3}
      borderWidth={1}
      borderColor="rgba(0,0,0,0.25)"
      backgroundColor={subdued ? 'rgba(0,0,0,0.025)' : 'rgba(255,255,255)'}
      {...props}
    />
  )
}

function List({ cardProps, children, ...props }) {
  const childCount = Children.count(children)
  return (
    <Box component="ul" {...props}>
      {Children.map(children, (child, index) => {
        const childTypes = {
          first: index === 0,
          last: index === childCount - 1,
        }
        const finalProps = {
          component: 'li',
          ...cardProps,
          ...child.props,
        }

        if (childTypes.first) {
          finalProps.radiusBottom = 0
          finalProps.borderBottomWidth = 0
        } else if (childTypes.last) {
          finalProps.radiusTop = 0
          finalProps.borderTopWidth = 0
        } else {
          finalProps.radius = 0
        }

        return cloneElement(child, finalProps)
      })}
    </Box>
  )
}

function Header({ row = true, ...props }) {
  return (
    <Flex
      width={'100%'}
      direction={row ? 'row' : 'column'}
      padding={1}
      paddingBottom={0}
      {...props}
    />
  )
}

function Section({ row, subdued, css, ...props }) {
  return (
    <Flex
      width={'100%'}
      direction={row ? 'row' : 'column'}
      padding={1}
      backgroundColor={subdued && 'rgba(0,0,0,0.035)'}
      css={[{ '& + &': { borderTop: '1px solid rgba(0,0,0,0.10)' } }, css]}
      {...props}
    />
  )
}

function Footer({ row = true, ...props }) {
  return (
    <Flex
      width={'100%'}
      direction={row ? 'row' : 'column'}
      padding={1}
      paddingTop={0}
      {...props}
    />
  )
}

Card.List = List
Card.Header = Header
Card.Section = Section
Card.Footer = Footer

export default Card