common-ui-button-v2

const StyledButton = styled.button<ButtonStyleType>`
  width: ${(props) => props.width || '100%'};
  background-color: ${(props) => props.backgroundColor || 'var(--blue300)'};
  color: ${(props) => props.color || 'var(--white)'};

  height: 50px;
  padding: 10px 12px;
  border-radius: 5px;
  font-size: 1rem;

  :hover {
    background-color: ${(props) => props.hoverBgColor || 'var(--blue200)'};
  }
`;

interface ButtonStyleType {
  width?: string;
  color?: string;
  backgroundColor?: string;
  hoverBgColor?: string;
}

interface S_ButtonProps {
  children: string;
  addStyle?: ButtonStyleType;
  onClick?: () => void;
}

export function S_Button({ children, addStyle, onClick }: S_ButtonProps) {
  if (addStyle) {
    const { width, backgroundColor, color, hoverBgColor } = addStyle;
    return (
      <StyledButton
        width={width}
        backgroundColor={backgroundColor}
        color={color}
        hoverBgColor={hoverBgColor}
        onClick={onClick}
      >
        {children}
      </StyledButton>
    );
  } else if (onClick !== undefined) {
    return <StyledButton onClick={onClick}>{children}</StyledButton>;
  }

  return <StyledButton>{children}</StyledButton>;
}