// @flow
import React, { type Node } from 'react'
import styled from 'react-emotion'
import withProps from 'recompose/withProps'
import { color, height, space } from 'styled-system'
import Absolute from '../../elements/Absolute'
import Avatar from '../Avatar'
import { shouldForwardProp } from '../../utils'

const Header = withProps({
  height: 40,
})(styled('header', { shouldForwardProp })(
  {
    position: 'relative',
    flex: 'none',
  },
  color,
  space,
  height,
))

type Props = {
  chartIcon?: () => Node,
  fullName?: string,
  initials?: string,
  children?: Node,
}

const avatarHeight = 48
const CardHeader = ({ chartIcon, fullName, initials, children, ...styles }: Props) => (
  <Header
    pt={3}
    px={3}
    // $FlowFixMe: Dont want to limit styled-system props
    {...styles}
  >
    { children }
    <Absolute bottom={-(avatarHeight * 0.5)} left={16}>
      <Avatar size={avatarHeight} fullName={fullName} initials={initials}>
        { chartIcon && chartIcon() }
      </Avatar>
    </Absolute>
  </Header>
)

CardHeader.defaultProps = {
  children: undefined,
  chartIcon: () => null,
  fullName: '',
  initials: '',
}

export default CardHeader