const TeamItem = styled.li`
  flex-basis: 100px;
  margin: 0 10px;
  transition: all 0.4s;

  img {
    width: 100%;
  }

  :hover {
    flex-basis: 140px;
  }
`;

import React from 'react';
import styled from 'styled-components';

import blackMilktea from '../assets/black-milktea.png';

const Wrapper = styled.div`
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
`;

const Team = styled.ul`
  display: flex;
  justify-content: center;
`;

const TeamItem = styled.li`
  flex-basis: 100px;
  margin: 0 10px;
  transition: all 0.4s;

  img {
    width: 100%;
  }

  :hover {
    flex-basis: 140px;
  }
`;

const Profile = styled.div`
  background-color: #222;
  position: relative;
`;

const ProfileContents = styled.div`
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px;
  color: white;

  h2 {
    font-size: 15px;

    span {
      display: block;
      font-size: 12px;
    }
  }

  p {
    display: none;
  }
`;

const Slider = () => {
  return (
    <Wrapper>
      <Team>
        <TeamItem>
          <Profile>
            <img src={blackMilktea} alt='vliews' />
            <ProfileContents>
              <h2>
                블랙밀크티<span>블랙밀크티</span>
              </h2>
              <p>
                아주아주 맛있는 블랙밀크티입니다. 시원한 아이스와 쫀득한 펄의
                만남! 맛을 기대해주세요.
              </p>
            </ProfileContents>
          </Profile>
        </TeamItem>

        <TeamItem>
          <Profile>
            <img src={blackMilktea} alt='vliews' />
            <ProfileContents>
              <h2>
                블랙밀크티<span>블랙밀크티</span>
              </h2>
              <p>
                아주아주 맛있는 블랙밀크티입니다. 시원한 아이스와 쫀득한 펄의
                만남! 맛을 기대해주세요.
              </p>
            </ProfileContents>
          </Profile>
        </TeamItem>

        <TeamItem>
          <Profile>
            <img src={blackMilktea} alt='vliews' />
            <ProfileContents>
              <h2>
                블랙밀크티<span>블랙밀크티</span>
              </h2>
              <p>
                아주아주 맛있는 블랙밀크티입니다. 시원한 아이스와 쫀득한 펄의
                만남! 맛을 기대해주세요.
              </p>
            </ProfileContents>
          </Profile>
        </TeamItem>

        <TeamItem>
          <Profile>
            <img src={blackMilktea} alt='vliews' />
            <ProfileContents>
              <h2>
                블랙밀크티<span>블랙밀크티</span>
              </h2>
              <p>
                아주아주 맛있는 블랙밀크티입니다. 시원한 아이스와 쫀득한 펄의
                만남! 맛을 기대해주세요.
              </p>
            </ProfileContents>
          </Profile>
        </TeamItem>

        <TeamItem>
          <Profile>
            <img src={blackMilktea} alt='vliews' />
            <ProfileContents>
              <h2>
                블랙밀크티<span>블랙밀크티</span>
              </h2>
              <p>
                아주아주 맛있는 블랙밀크티입니다. 시원한 아이스와 쫀득한 펄의
                만남! 맛을 기대해주세요.
              </p>
            </ProfileContents>
          </Profile>
        </TeamItem>
      </Team>
    </Wrapper>
  );
};

export default Slider;