'use client'

import type * as React from 'react'
import type { ControlTooltip } from '@admin/components/custom/content-editor/tiptap-ui/control-options'
import { getControlTooltipTitle } from '@admin/components/custom/content-editor/tiptap-ui/control-options'
import { Button } from '@admin/components/ui/button'
import { LinkIcon } from 'lucide-react'

export type LinkButtonProps = React.ComponentProps<typeof Button> & {
  tooltip?: ControlTooltip
}

export function LinkButton({
  className,
  children,
  tooltip,
  title,
  ref,
  ...props
}: LinkButtonProps) {
  return (
    <Button
      type="button"
      className={className}
      variant="ghost"
      size="icon-sm"
      role="button"
      tabIndex={-1}
      aria-label="Link"
      title={getControlTooltipTitle(tooltip, title ?? 'Link')}
      ref={ref}
      {...props}
    >
      {children || <LinkIcon />}
    </Button>
  )
}