import React from "react";
import styled from "styled-components";
import { colors } from "../../theme/colors";

interface AccordionIconProps {
  open: boolean;
}

const Icon = styled.div<AccordionIconProps>`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: ${(p) => (p.open ? colors.orange1 : colors.blue1)};
  color: ${colors.white};
  min-width: 2.5rem;
  max-width: 2.5rem;
  min-height: 2.5rem;
  max-height: 2.5rem;
  margin: 0.2em;
  font-size: 2.5rem;

  ${(p) => p.open && (`
    span {
      transform: rotate(45deg);
    }
  `)}

`;

const AccordionIcon: React.FC<AccordionIconProps> = ({ open }) => (
  <Icon open={open}>
    <span>+</span>
  </Icon>
);

export default AccordionIcon;
