import { styled } from "@twind/react"

const Box = styled()

const Button = styled("button", {
  base: `
    appearance-none border-none bg-transparent
    rounded-full px-2.5
  `,

  variants: {
    size: {
      sm: `text-sm h-6`,
      md: `text-base h-9`,
    },

    variant: {
      gray: `
        bg-gray-500
        hover:bg-gray-600
      `,
      primary: `
        text-white bg-purple-500
        hover:bg-purple-600
      `,
    },
    outlined: {
      true: `bg-transparent ring-1`,
    },
  },

  defaults: {
    variant: "gray",
    size: "sm",
  },

  matches: [
    {
      variant: "gray",
      outlined: true,
      use: `ring-gray-500`,
    },
    {
      variant: "primary",
      outlined: true,
      use: `text-purple-500 ring-gray-500 hover:text-white`,
    },
  ],
})

<Box tw="m-2.5 flex flex-wrap" css={{ gap: "20px" }}>
  <Button>Button</Button>
  <Button variant="gray">Gray Button</Button>
  <Button variant="primary">Primary Button</Button>
  <Button variant="gray" outlined>
    Outlined Gray Button
  </Button>
  <Button variant="primary" outlined>
    Outlined Primary Button
  </Button>
  <Button variant="primary" outlined size={{ initial: "sm", lg: "md" }}>
    Responsive Primary Button
  </Button>
</Box>