import React from 'react';
import { Bell } from 'lucide-react';
import { cn } from '../../utils/cn';

export interface NotificationBadgeProps {
    count?: number;
    className?: string;
}

/**
 * NotificationBadge - Simple notification indicator
 * Part of Kōdō Design System
 */
export const NotificationBadge = React.forwardRef<HTMLDivElement, NotificationBadgeProps>(
    ({ count = 0, className }, ref) => {
        return (
            <div ref={ref} className={cn('relative inline-block', className)}>
                <Bell className="w-5 h-5 text-kodo-secondary hover:text-kodo-primary transition-colors" />
                {count > 0 && (
                    <span className="absolute -top-1 -right-1 w-4 h-4 bg-kodo-red rounded-full flex items-center justify-center text-[10px] font-bold text-white border border-kodo-void">
                        {count > 9 ? '9+' : count}
                    </span>
                )}
            </div>
        );
    }
);

NotificationBadge.displayName = 'NotificationBadge';
