import React from 'react';
import styled from 'styled-components';

import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';

export type ShowMoreButtonProps = {
  onClick: () => void;
  children: React.ReactNode;
  className?: string;
  isExpanded?: boolean;
};

export function ShowMoreButton({
  onClick,
  children,
  className,
  isExpanded = false,
}: ShowMoreButtonProps): React.ReactElement {
  return (
    <BaseShowMoreButton type="button" onClick={onClick} className={className}>
      {children}
      <ChevronIcon $isExpanded={isExpanded} />
    </BaseShowMoreButton>
  );
}

const BaseShowMoreButton = styled.button`
  all: unset;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: none;
  border: none;
  gap: var(--catalog-show-more-button-gap);
  color: var(--catalog-show-more-button-color);
  padding: 0;
  margin-top: var(--spacing-unit);

  &:hover {
    color: var(--catalog-show-more-button-color-hover);
  }
`;

const ChevronIcon = styled(ChevronDownIcon)<{ $isExpanded: boolean }>`
  transform: ${({ $isExpanded }) => ($isExpanded ? 'rotate(180deg)' : 'rotate(0)')};
  transition: transform 0.2s ease;
`;