import { Button, ButtonProps, LogIn01, useStyletron } from "@mezo-org/mezo-clay"
import React, { forwardRef } from "react"

type DisconnectedTriggerProps = Omit<ButtonProps, "children"> & {
  children: string
}

const DisconnectedTrigger = forwardRef<
  HTMLButtonElement,
  DisconnectedTriggerProps
>((props, ref) => {
  const { onClick, children, ...restProps } = props

  const [, theme] = useStyletron()

  return (
    <Button
      startEnhancer={
        <LogIn01 color="currentColor" size={theme.sizing.scale600} />
      }
      overrides={{
        Root: {
          props: { ref },
        },
      }}
      size="small"
      shape="pill"
      onClick={onClick}
      {...restProps}
    >
      {children}
    </Button>
  )
})

export default DisconnectedTrigger