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

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

const StyledFigure = styled(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(H2) `
  text-transform: capitalize;
  padding: 0 0 rem(15) rem(15);
  margin: 0;
`

const StyledMediaCarousel = styled(MediaCarousel) ``

const StyledWrapper = styled.section ``

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