import { XIcon } from '@phosphor-icons/react'
import classNames from 'classnames'
import React from 'react'

export interface DismissButtonProps {
  onClick: () => void
  /**
   * `'overlay'` — translucent button sitting on top of media (image /
   * video corner). `'inline'` — opaque button placed in the row of a
   * compact attachment alongside other content.
   */
  variant?: 'overlay' | 'inline'
  ariaLabel?: string
}

const DismissButton: React.FC<DismissButtonProps> = ({
  onClick,
  variant = 'overlay',
  ariaLabel = 'Dismiss attachment',
}) => (
  <button
    type="button"
    onClick={(e) => {
      e.stopPropagation()
      onClick()
    }}
    aria-label={ariaLabel}
    className={classNames(
      'flex size-6 items-center justify-center rounded-full text-white',
      variant === 'overlay'
        ? 'bg-[#121110]/85 backdrop-blur'
        : 'bg-white/15 hover:bg-white/25'
    )}
  >
    <XIcon className="size-3" weight="bold" />
  </button>
)

export default DismissButton