import { styled } from 'styleh-components'
import { FigureCaption, StyledImage, Figure } from 'molecules/Figure'
import { H2 } from 'atoms/Text'
import { MediaCarousel, Slot } from 'organisms/MediaCarousel'
import { Link } from 'atoms/Link'

const StyledLink = styled.withComponent(Link)`
  font-size: rem(16);
  text-transform: capitalize;
  padding: rem(8);
  text-decoration: none;
  color: #535353;
`

const StyledFigure = styled.withComponent(Figure)`
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  ${FigureCaption} {
    font-size: rem(16);
    text-transform: capitalize;
    padding: rem(8);
  }

  ${StyledImage} {
    position: relative;
    width: 100%;
    height: auto;

    img {
      position: relative;
    }
  }
`

const StyledTitle = styled.withComponent(H2)`
  text-transform: capitalize;
  padding: 0 0 rem(15) rem(15);
  margin: 0;
`

const StyledMediaCarousel = styled.withComponent(MediaCarousel)`
  ${Slot} {
    background: #f8f8f8;
  }
`

const StyledWrapper = styled.section``

export {
  StyledLink,
  StyledTitle,
  StyledMediaCarousel,
  StyledFigure,
  StyledWrapper,
}