Alert banner

import { useState, type ReactNode } from 'react';
import { AnimatePresence, motion } from 'motion/react';

const TONES = {
  info: 'border-blue-500/40 bg-blue-500/10 text-blue-600',
  success: 'border-green-500/40 bg-green-500/10 text-green-600',
  warning: 'border-amber-500/40 bg-amber-500/10 text-amber-600',
  error: 'border-red-500/40 bg-red-500/10 text-red-600'
};

type Props = { tone: keyof typeof TONES; children: ReactNode };

// <AlertBanner tone='warning'>Your trial ends in 3 days. <a href='/billing'>Add a card</a></AlertBanner>
export function AlertBanner({ tone, children }: Props) {
  const [open, setOpen] = useState(true);

  return (
    <AnimatePresence>
      {open && (
        // Animating height pushes the page down (and back up) instead of jumping.
        <motion.div
          initial={{ height: 0, opacity: 0 }}
          animate={{ height: 'auto', opacity: 1 }}
          exit={{ height: 0, opacity: 0 }}
          transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
          className='overflow-hidden'
        >
          {/* Errors interrupt screen readers right away; the rest wait their turn. */}
          <div
            role={tone === 'error' ? 'alert' : 'status'}
            className={`mb-4 flex items-center gap-3 rounded-lg border px-4 py-3 text-sm ${TONES[tone]}`}
          >
            <svg
              viewBox='0 0 16 16'
              aria-hidden='true'
              className='size-4 shrink-0 fill-none stroke-current stroke-[1.5]'
            >
              <circle cx='8' cy='8' r='6.5' />
              <path d='M8 5v3.5M8 11h.01' />
            </svg>
            <p className='flex-1 text-foreground'>{children}</p>
            <button
              aria-label='Dismiss'
              onClick={() => setOpen(false)}
              className='opacity-60 hover:opacity-100'
            >
              ✕
            </button>
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}