// @flow
import React, { type ElementProps } from 'react';
import styled from 'styled-components';
import { SmallChevronDown } from '../small-chevrons/small-chevron-down';

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

type ExpandMoreIconProps = {
  isOpen: boolean,
} & ElementProps<typeof SmallChevronDown>;

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

ExpandMoreIcon.displayName = 'ExpandMoreIcon';
