import React from 'react';
import { IoMdContract, IoMdExpand } from 'react-icons/io';
import styled from 'styled-components';
import { uiColors } from '../../constants/uiColors';

interface ExpandButtonProps {
  isExpanded: boolean;
  onClick: () => void;
}

export const ExpandButton: React.FC<ExpandButtonProps> = ({
  isExpanded,
  onClick,
}) => (
  <StyledExpandButton isExpanded={isExpanded} onClick={onClick}>
    {isExpanded ? <IoMdContract size={20} /> : <IoMdExpand size={20} />}
  </StyledExpandButton>
);

const StyledExpandButton = styled.button<{ isExpanded: boolean }>`
  position: absolute;
  top: 0;
  ${({ isExpanded }) => (isExpanded ? 'right: 0' : 'left: 0.5rem')};
  width: 30px;
  height: 30px;
  background-color: ${uiColors.orange};
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;

  &:hover {
    background-color: ${uiColors.orange};
  }
`;
