Dual action

---
/**
 * Dual action: A cookie notice with Decline and Allow buttons, as a floating card on a neutral fill.
 *
 * @block banner
 * @order 5
 */
import { BadgeCheck } from '@lucide/astro'
import Banner from '@/components/apogee/sections/Banner/Banner.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
import { accentRuns, plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { BannerContent } from '@/components/apogee/sections/_shared/banner.ts'

/** @composable */
interface Props extends BannerContent {
  /** The button that declines. @category content */
  declineLabel?: string
  /** The button that accepts. @category content */
  acceptLabel?: string
}

const {
  heading = 'We use cookies to improve your experience',
  description = 'Read our *cookie policy*.',
  linkHref = '#',
  declineLabel = 'Decline',
  acceptLabel = 'Allow',
  closeLabel,
} = Astro.props
---

<Banner inline heading={plain(heading)} closeLabel={closeLabel}>
  <BadgeCheck slot="icon" class="size-5 text-primary" aria-hidden="true" />
  <Fragment slot={description ? 'default' : 'none'}>{' '}{description && accentRuns(description).map((r) => (r.accent && linkHref ? <Link href={linkHref} color="neutral">{r.text}</Link> : r.text))}{" "}</Fragment>
  <div slot="actions" class="flex flex-col-reverse gap-2 sm:flex-row">
    <Button size="small" variant="outline" color="neutral">{declineLabel}</Button>
    <Button size="small">{acceptLabel}</Button>
  </div>
</Banner>