import * as React from 'react'
import styled from 'styled-components'
import { ImArrowRight } from 'react-icons/im'
import type { IconType } from 'react-icons'

import type { ArtProps, ReasonProps, FeatureProps } from '../types'

export const CenteredText = styled.p`
  text-align: center;
  max-width: 300px;
  display: block;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1;
  font-family:
    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
`
export const Art = styled.img.attrs<ArtProps>((props) => ({
  alt: props.info || '',
  title: props.info || ''
}))`
  max-width: 100%;
  height: auto;
`

const ArrowHolder = styled.div<{ bgColor?: string }>`
  display: inline-block;
  border-radius: 50px;
  padding: 15px 17px;
  color: white;
  background-color: ${(props) =>
    props.bgColor === 'red' ? '#ed1c1c' : '#90c445'};
`
const RightArrow: React.FC<{ bgColor?: string }> = ({ bgColor = '' }) => (
  <ArrowHolder bgColor={bgColor}>
    <ImArrowRight size={24} />
  </ArrowHolder>
)
const ReasonDesc = styled.p`
  display: inline-block;
  width: calc(100% - 60px);
  vertical-align: top;
  margin: 20px 0 0;
  min-height: 60px;
  line-height: 1;
  padding-left: 20px;
  text-transform: uppercase;
`

export const Reason: React.FC<ReasonProps> = ({ text, bgColor = '' }) => (
  <>
    <RightArrow bgColor={bgColor} />
    <ReasonDesc>{text}</ReasonDesc>
  </>
)

const IconHolderStyled = styled.div`
  display: inline-block;
  border: 1px solid #314351;
  color: #314351;
  border-radius: 50px;
  padding: 15px 17px;
  vertical-align: top;
`

const IconHolder = ({ Icon }: { Icon: IconType }) => {
  return (
    <IconHolderStyled>
      <Icon size={24} />
    </IconHolderStyled>
  )
}

const FeatureDetails = styled.div`
  display: inline-block;
  width: calc(100% - 60px);
  padding-left: 20px;
  margin-bottom: 20px;
`
const FeatureTitle = styled.h5`
  font-family:
    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
    sans-serif;
  text-transform: uppercase;
`
const FeatureDesc = styled.p`
  opacity: 0.5;
  font-size: 0.9rem;
`

export const Feature: React.FC<FeatureProps> = ({
  title,
  desc,
  Icon,
  className
}) => (
  <div className={className ?? 'col-md-4'}>
    <IconHolder Icon={Icon} />
    <FeatureDetails>
      <FeatureTitle>{title}</FeatureTitle>
      <FeatureDesc>{desc}</FeatureDesc>
    </FeatureDetails>
  </div>
)

export const ThumbnailWrapper = styled.div`
  -webkit-box-flex: 0;
  flex: 0 0 33.3333%;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  display: flex;
  max-width: 33.3333%;
  @media (min-width: 576px) {
    flex-basis: 25%;
    max-width: 25%;
  }
  cursor: pointer;
  &:hover {
    opacity: 0.5;
  }
`