// @design-system: domain/DraftsBanner
import { cn } from '@/lib/cn';
import { Icon } from '@/components/ui/icons/Icon';
import { useT } from '@/lib/i18n/react';
import { useDraftsBannerStore } from './draftsBannerStore';
// ── Component ────────────────────────────────────────────────────────────────
/** Props for DraftsBanner */
export interface DraftsBannerProps {
/** Number of deal drafts for this vendor. Renders null when 0. */
count: number;
/** Additional class names. */
className?: string;
}
/**
* DraftsBanner — amber-tinted banner shown on vendor dashboard when the vendor
* has deal drafts. Links to /vendor/deals/drafts. Dismissable for the session.
*
* @example
* ```tsx
*
* ```
*/
export function DraftsBanner({ count, className }: DraftsBannerProps) {
const t = useT('vendorDrafts');
const { dismissed, dismiss } = useDraftsBannerStore();
if (count === 0 || dismissed) return null;
const text = count === 1 ? t('bannerOne') : t('bannerMany').replace('{n}', String(count));
return (
);
}