Single action brand

---
/**
 * Single action brand: An icon, a one-line announcement and one link button, as a floating card on the brand colour.
 *
 * @block banner
 * @order 4
 */
import { Sparkles } from '@lucide/astro'
import Banner from '@/components/apogee/sections/Banner/Banner.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Button from '@/components/apogee/Button/Button.astro'
import { plain } from '@/components/apogee/sections/_shared/spine.ts'
import type { BannerContent } from '@/components/apogee/sections/_shared/banner.ts'

/** @composable */
interface Props extends BannerContent {}

const {
  heading = "We've just raised our Series A",
  description = 'Read the note from our founders.',
  primaryAction = { label: 'Read update', href: '#' },
  closeLabel,
} = Astro.props
---

<Banner background="primary" inline heading={plain(heading)} description={description ? plain(description) : undefined} closeLabel={closeLabel}>
  <FeaturedIcon slot="icon" theme="light" color="primary" size="small"><Sparkles /></FeaturedIcon>
  <Fragment slot={primaryAction ? 'actions' : 'none'}>{primaryAction && <Button href={primaryAction.href} size="small" color="neutral">{primaryAction.label}</Button>}</Fragment>
</Banner>