// @flow
import React from 'react';
import styled from 'styled-components';
import { SmallChevronDown } from '../small-chevrons/small-chevron-down';
import type { ExpandMoreIconProps } from './expand-more-icon.proptypes';

const AnimatedChevron = styled(SmallChevronDown)`
  transform: ${(props) => (props.isOpen ? 'rotate(180deg)' : '')};
  transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
  margin-top: 3px;
`;

export const ExpandMoreIcon = ({
  isOpen = false,
  ...props
}: ExpandMoreIconProps) => <AnimatedChevron isOpen={isOpen} {...props} />;

ExpandMoreIcon.displayName = 'ExpandMoreIcon';
