import type { ComponentProps } from 'react'
import { Button, Theme } from 'tamagui'

// DestructiveButton — wraps a Button in `<Theme name="red">` so the v5
// `red_light` / `red_dark` sub-themes tint it correctly under our custom
// `light` / `dark` themes. (Our tamagui.config.ts spreads
// `defaultConfig.themes` before overriding light/dark, which preserves the
// red sub-themes — that's why this works without extra config.)
//
// Match ConfirmDialog's destructive action treatment: the dialog uses the
// same `<Theme name="red">` wrapper, so any destructive button elsewhere
// ends up visually consistent with the confirmation the user is presented.
export function DestructiveButton(props: ComponentProps<typeof Button>) {
  return (
    <Theme name="red">
      <Button {...props} />
    </Theme>
  )
}
