Announce Banner

import { BannerAnnounce } from '@/components/blocks/banner-announce'

'use client'

import { useState } from 'react'
import { BannerAnnounce } from '@/components/blocks/banner-announce'

export default function BannerAnnounceDemo() {
  const [infoKey, setInfoKey] = useState(0)
  const [warnKey, setWarnKey] = useState(0)

  return (
    <div className="flex min-h-[200px] flex-col justify-center gap-8 py-8">
      <div className="space-y-3">
        <p className="px-4 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:px-6">
          Info
        </p>
        <BannerAnnounce
          key={`info-${infoKey}`}
          message="Ledger 2.4 ships Thursday, draft reviews, shared pens, and offline ink."
          link={{ label: 'Read the notes', href: '#' }}
          variant="info"
          onDismiss={() => {
            window.setTimeout(() => setInfoKey((k) => k + 1), 600)
          }}
        />
      </div>

      <div className="space-y-3">
        <p className="px-4 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:px-6">
          Warning
        </p>
        <BannerAnnounce
          key={`warn-${warnKey}`}
          message="Scheduled maintenance Sunday 02:00–04:00 UTC. Writes pause; reads stay live."
          link={{ label: 'Status page', href: '#' }}
          variant="warning"
          onDismiss={() => {
            window.setTimeout(() => setWarnKey((k) => k + 1), 600)
          }}
        />
      </div>
    </div>
  )
}