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

import type { JSX } from 'react';
import type { ButtonSize } from '@redocly/theme/components/Button/Button';

type ButtonGroupVariant = 'outlined';

type ButtonGroupProps = {
  variant?: ButtonGroupVariant;
  size?: ButtonSize;
  children: React.ReactNode;
  className?: string;
};

export function ButtonGroup(props: ButtonGroupProps): JSX.Element {
  const { variant = 'outlined', className = '', children, size = 'medium' } = props;

  return (
    <ButtonGroupWrapper
      data-component-name="Button/ButtonGroup"
      className={`button-group-${variant} button-group-size-${size} ${className}`}
    >
      {children}
    </ButtonGroupWrapper>
  );
}

const ButtonGroupWrapper = styled.div`
  display: flex;
  line-height: var(--button-line-height);

  .button {
    border-radius: 0;
  }

  & > .button:first-child,
  *:first-child > .button {
    border-top-left-radius: var(--button-border-radius);
    border-bottom-left-radius: var(--button-border-radius);
  }

  & > .button:last-child,
  *:last-child > .button {
    border-top-right-radius: var(--button-border-radius);
    border-bottom-right-radius: var(--button-border-radius);
  }

  & > .button:not(:first-child),
  *:not(:first-child) > .button {
    border-left: none;
  }
`;