/** @jsxImportSource @emotion/react */

import React, { FC, SVGProps } from 'react';
import { css, styled } from 'twin.macro';

export const collapseExpandIconModes = ['expand', 'collapse'] as const;
type CollapseExpandIconMode = typeof collapseExpandIconModes[number];

type IconSvgProps = SVGProps<SVGSVGElement> & {
  mode: CollapseExpandIconMode;
  duration?: number;
  timingFunction?: string;
};

type IconProps = IconSvgProps & {
  className?: string;
};

const CollapseExpandIconSvg = styled.svg<IconSvgProps>(
  ({ mode, duration = 300, timingFunction = 'ease-out' }) => [
    css`
      transform-origin: center;
      transition: transform ${duration}ms ${timingFunction};
      ${mode === 'expand' && 'transform: rotate(0deg);'}
      ${mode === 'collapse' && 'transform: rotate(180deg);'}
    `,
  ],
);

const CollapseExpandIcon: FC<IconProps> = (props) => (
  <CollapseExpandIconSvg
    width={17}
    height={10}
    viewBox="0 0 17 10"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      d="M0 1.274L1.24 0 8.5 7.516 15.76 0 17 1.274 8.5 10 0 1.274z"
      fill="#345E9E"
    />
  </CollapseExpandIconSvg>
);

export default CollapseExpandIcon;