/**
 * WhatsNewButton
 *
 * Renders the inbox icon in the page header. Badge shows unread count.
 * Each card in the panel has its own "Mark as read" button.
 */

/**
 * WordPress Dependencies
 */
import { __ } from '@wordpress/i18n';
import { Inbox } from 'lucide-react';

/**
 * Internal Dependencies
 */
import { useWhatsNew } from '@admin/whats-new/useWhatsNew';
import { WhatsNewPanel } from '@admin/whats-new/WhatsNewPanel';

/**
 * WhatsNewButton component.
 */
export function WhatsNewButton() {
	const { unread, read, isOpen, setIsOpen, isLoading, markAsRead } =
		useWhatsNew();

	const hasUnread = ! isLoading && unread.length > 0;

	return (
		<>
			<button
				type="button"
				onClick={ () => setIsOpen( true ) }
				className="group text-gray-500 hover:text-primary transition-colors bg-transparent border-0 p-0 cursor-pointer appearance-none flex items-center"
				aria-label={ __( "What's New", 'advanced-ads' ) }
				title={ __( "What's New", 'advanced-ads' ) }
			>
				<span className="flex items-center justify-between">
					<Inbox className="size-7 group-hover:stroke-current" />

					{ hasUnread && (
						<span
							aria-hidden="true"
							className="rounded-full relative -top-2 bg-red-400 text-white text-[10px] leading-none z-10 px-1.5 py-1"
						>
							{ unread.length }
						</span>
					) }
				</span>
			</button>

			{ isOpen && (
				<WhatsNewPanel
					unread={ unread }
					read={ read }
					onMarkRead={ markAsRead }
					onClose={ () => setIsOpen( false ) }
				/>
			) }
		</>
	);
}