// @flow
import React, { type Node } from 'react'
import styled from 'react-emotion'
import withProps from 'recompose/withProps'
import CardHeader from '../CardHeader'
import Flex from '../../elements/Flex'

const CardElement = withProps({
  flexDirection: 'column',
  height: '100%',
  bg: 'white',
})(styled(Flex)(
  {
    position: 'relative',
    overflow: 'hidden',
    borderRadius: 0,
    boxShadow: '0 0 3px 0 rgba(0, 0, 0, 0.2)',
  },
  ({ minHeight }) => ({
    minHeight: minHeight || '344',
  }),
))

type Props = {
  avatarProps: {
    chartIcon?: () => Node,
    fullName?: string,
    initials?: string,
  },
  children: Node,
  headerBg: string,
  minHeight: number,
  headerProps?: {
    render: () => Node,
  }
}

const Card = ({
  avatarProps: { chartIcon, fullName, initials },
  children,
  headerBg,
  minHeight,
  headerProps,
}: Props) => (
  <CardElement minHeight={minHeight}>
    <CardHeader
      bg={headerBg}
      chartIcon={chartIcon}
      fullName={fullName}
      initials={initials}
    >
      {headerProps && headerProps.render && headerProps.render()}
    </CardHeader>
    {children}
  </CardElement>
)

Card.defaultProps = {
  headerProps: undefined,
}

export default Card