import React from "react";
import { Button as AriakitButton } from "ariakit/button";
import styled, { css, system, th } from "@xstyled/styled-components";
import { getStatusColor } from "../containers/Status";

const InnerButton = styled.buttonBox(({ $tint = "primary" }) => {
  const bgColor = th.color(`${$tint}-800-a80`);
  const hoverBgColor = th.color(`${$tint}-700-a80`);
  const borderColor = th.color(`${$tint}-400-a60`);

  return css`
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: md;
    cursor: default;
    border: 1;
    border-color: ${borderColor};
    padding: 3 4;
    color: white;
    transition: default;
    transition-duration: 300ms;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    gap: 1;

    background-color: ${bgColor};

    &:hover:not(:disabled),
    &:active:not(:disabled) {
      background-color: ${hoverBgColor};
    }

    &:focus-visible {
      ${system.apply({ ring: 2, ringColor: "primary-300-a50" })}
    }

    &:disabled {
      cursor: default;
      opacity: 0.38;
    }
  `;
});

export const Button = React.forwardRef(
  ({ variant = "primary", children, as, ...props }, ref) => {
    const baseColor = getStatusColor(variant);
    return (
      <AriakitButton ref={ref} $tint={baseColor} {...props}>
        {(buttonProps) => (
          <InnerButton {...buttonProps} as={as}>
            {children}
          </InnerButton>
        )}
      </AriakitButton>
    );
  }
);

@@ -103,16 +103,8 @@
 css,
- system,
  th 
@@ -634,17 +634,17 @@
 adding: 
-3
+2
  4;%0A    
@@ -952,15 +952,14 @@
 ocus
--visibl
+:activ
 e %7B%0A
@@ -968,66 +968,22 @@
     
-$%7Bsystem.apply(%7B ring: 2, ringColor: %22primary-300-a50%22 %7D)%7D
+outline: none;
 %0A   

fix padding & focus style