import { t } from '@/lib/i18n'

interface NotificationPanelHeaderProps {
  unreadCount: number
  onMarkAllAsRead: () => void
  onClose: () => void
}

export function NotificationPanelHeader({
  unreadCount,
  onMarkAllAsRead,
  onClose,
}: NotificationPanelHeaderProps): React.ReactElement {
  return (
    <div className="flex items-center justify-between p-4 border-b border-gray-200">
      <h3 className="text-lg font-semibold text-gray-900">{t('notification.title')}</h3>
      <div className="flex items-center gap-2">
        {unreadCount > 0 && (
          <button
            onClick={onMarkAllAsRead}
            className="text-sm text-blue-600 hover:text-blue-700 font-medium"
          >
            {t('notification.markAllAsRead')}
          </button>
        )}
        <button
          onClick={onClose}
          className="text-gray-400 hover:text-gray-600"
          aria-label={t('notification.close')}
        >
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M6 18L18 6M6 6l12 12"
            />
          </svg>
        </button>
      </div>
    </div>
  )
}