text: import React from 'react'
  import styled from 'styled-components'
  import { Link } from 'gatsby'
  import Img from 'gatsby-image'
  
  const Post = styled.li`
    position: relative;
    border: 1px solid ${props => props.theme.colors.secondary};
    border-radius: 2px;
    margin: 0 0 1em 0;
    width: 100%;
    transition: background 0.2s;
    @media screen and (min-width: ${props => props.theme.responsive.small}) {
      flex: ${props => (props.featured ? '0 0 100%' : '0 0 49%')};
      margin: 0 0 2vw 0;
    }
    @media screen and (min-width: ${props => props.theme.responsive.medium}) {
      flex: ${props => (props.featured ? '0 0 100%' : '0 0 32%')};
    }
    &:hover {
      background: ${props => props.theme.colors.tertiary};
    }
    a {
      display: flex;
      flex-flow: column;
      height: 100%;
      width: 100%;
      color: ${props => props.theme.colors.base};
      text-decoration: none;
      .gatsby-image-wrapper {
        height: 0;
        padding-bottom: 60%;
        @media screen and (min-width: ${props => props.theme.responsive.small}) {
          padding-bottom: ${props => (props.featured ? '40%' : '60%')};
        }
      }
    }
  `
  
  const EnglishLevel = styled.h2`
    font-size: 1.2em;
    font-weight: 600;
    text-transform: capitalize;
    margin: 1rem 1rem 0.5rem 1rem;
  `
  
  const DetailMessage = styled.span`
    font-size: 0.8em;
    color: gray;
  `
  
  const Date = styled.h3`
    margin: 0 1rem 0.5rem 1rem;
    color: gray;
  `
  
  const ReadingTime = styled.h4`
    margin: 0 1rem 1.5rem 1rem;
    color: gray;
  `
  
  const Excerpt = styled.p`
    margin: 0 1rem 1rem 1rem;
    line-height: 1.6;
  `
  
  const Card = ({
    hasDetail,
    slug,
    englishLevel,
    heroImage,
    title,
    publishDate,
    body,
    body: {
      childMarkdownRemark: { timeToRead },
    },
    ...props
  }) => {
    return (
      <Post featured={props.featured}>
        <Link to={`/${slug}/`}>
          <Img fluid={heroImage.fluid} backgroundColor={'#eeeeee'} />
          <EnglishLevel>
            英語レベル {new Array(englishLevel).fill(undefined).map(_ => '⭐️')}{' '}
            {hasDetail && <DetailMessage>(詳細情報有)</DetailMessage>}
          </EnglishLevel>
          <Date>{publishDate}</Date>
          <ReadingTime>{timeToRead} min read</ReadingTime>
          <Excerpt
            dangerouslySetInnerHTML={{
              __html: body.childMarkdownRemark.excerpt,
            }}
          />
        </Link>
      </Post>
    )
  }
  
  export default Card
  