import { Button } from './ui'
import { t } from '@/lib/i18n'

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

function MarkAllAsReadButton({ unreadCount, onMarkAllAsRead }: { unreadCount: number; onMarkAllAsRead: () => void }): React.ReactElement | null {
  if (unreadCount === 0) {
    return null
  }
  return (
    <Button
      type="button"
      variant="ghost"
      size="small"
      onClick={onMarkAllAsRead}
      className="text-sm text-blue-600 hover:text-blue-700"
    >
      {t('notification.markAllAsRead')}
    </Button>
  )
}

function CloseButton({ onClose }: { onClose: () => void }): React.ReactElement {
  return (
    <Button
      type="button"
      variant="ghost"
      size="small"
      onClick={onClose}
      className="text-gray-400 hover:text-gray-600 p-0 min-w-0"
      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>
  )
}

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">
        <MarkAllAsReadButton unreadCount={unreadCount} onMarkAllAsRead={onMarkAllAsRead} />
        <CloseButton onClose={onClose} />
      </div>
    </div>
  )
}