import React, { FC } from 'react';

import { ColorTokens } from '../../foundation/Colors';
import { ToggleCaretArrow, ToggleCaretBox } from './ToggleCaret.styled';

export type ToggleCaretProps = {
  arrowColor?: ColorTokens;
  className?: string;
  disabled?: boolean;
  isOpen: boolean;
  onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
};

export const ToggleCaret: FC<ToggleCaretProps> = ({
  disabled,
  onClick,
  isOpen,
  className,
  arrowColor,
}) => (
  <ToggleCaretBox
    className={className}
    data-testid="ToggleCaret-ToggleCaretBox"
    onClick={disabled ? undefined : onClick}
  >
    <ToggleCaretArrow
      color={arrowColor}
      data-testid={`ToggleCaretArrow-${isOpen ? 'Open' : 'Closed'}`}
      isOpen={isOpen}
    />
  </ToggleCaretBox>
);