import React from 'react'

import {
  Card,
  CardActions,
  CardTitle,
  CardTitleText,
  shadow2dp,
  Button,
  Spacer,
  Icon,
} from 'styled-mdl'

const EventCard = Card.extend`
  ${shadow2dp()} width: 256px;
  height: 256px;
  background: #3e4eb8;
  align-self: flex-start;
`

const EventInfo = CardTitleText.extend`
  margin-top: 0;
  align-self: flex-start;
  color: #fff;
  font-weight: normal;
  font-size: 24px;
  line-height: 32px;
`

const EventActions = CardActions.extend`
  border-color: rgba(255, 255, 255, 0.2);
  display: flex;
  box-sizing: border-box;
  align-items: center;
`

const EventIcon = Icon.extend`
  padding-right: 10px;
  color: #fff;
`

const WhiteButton = Button.extend`
  color: #fff;
`

const caption = 'Event Card'

const demo = () => (
  <EventCard>
    <CardTitle expand>
      <EventInfo>
        Featured event:<br />
        May 24, 2016<br />
        7-11pm
      </EventInfo>
    </CardTitle>
    <EventActions border>
      <WhiteButton colored>Add to calenar</WhiteButton>
      <Spacer />
      <EventIcon name="event" size="24" />
    </EventActions>
  </EventCard>
)

const code = `
const EventCard = Card.extend\`
  ${shadow2dp()} 
  width: 256px;
  height: 256px;
  background: #3e4eb8;
  align-self: flex-start;
\`

const EventInfo = CardTitleText.extend\`
  margin-top: 0;
  align-self: flex-start;
  color: #fff;
  font-weight: normal;
  font-size: 24px;
  line-height: 32px;
\`

const EventActions = CardActions.extend\`
  border-color: rgba(255, 255, 255, 0.2);
  display: flex;
  box-sizing: border-box;
  align-items: center;
\`

const EventIcon = Icon.extend\`
  padding-right: 10px;
  color: #fff;
\`

const WhiteButton = Button.extend\`
  color: #fff;
\`

const caption = 'Event Card'

// Somewhere in a render
<EventCard>
  <CardTitle expand>
    <EventInfo>
      Featured event:<br />
      May 24, 2016<br />
      7-11pm
    </EventInfo>
  </CardTitle>
  <EventActions border>
    <WhiteButton colored>Add to calenar</WhiteButton>
    <Spacer />
    <EventIcon />
  </EventActions>
</EventCard>`

export default { caption, demo, code }
