import React from 'react'
import { FaBell, FaEye } from 'react-icons/fa'
import dayjs from 'dayjs'
import { mockAnnouncements, Announcement } from '../../../mocks/mockIntranet'

interface ImportantAnnouncementsProps {
  onAnnouncementClick: (announcement: Announcement) => void
}

const ImportantAnnouncements: React.FC<ImportantAnnouncementsProps> = ({ onAnnouncementClick }) => {
  const pinnedAnnouncements = mockAnnouncements.filter((a) => a.isPinned).slice(0, 3)

  const getCategoryColor = (category: string) => {
    const colors: Record<string, string> = {
      general: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
      hr: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
      it: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
      event: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
      urgent: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
    }
    return colors[category] || colors.general
  }

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      <div className="p-6 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center justify-between">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
            <FaBell className="w-5 h-5" />
            Önemli Duyurular
          </h2>
        </div>
      </div>
      <div className="divide-y divide-gray-200 dark:divide-gray-700">
        {pinnedAnnouncements.map((announcement) => (
          <div
            key={announcement.id}
            onClick={() => onAnnouncementClick(announcement)}
            className="p-6 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors"
          >
            <div className="flex items-start gap-4">
              <img
                src={announcement.author.avatar}
                alt={announcement.author.fullName}
                className="w-10 h-10 rounded-full"
              />
              <div className="flex-1 min-w-0">
                <div className="flex items-center gap-2 mb-2">
                  <h3 className="text-base font-semibold text-gray-900 dark:text-white">
                    {announcement.title}
                  </h3>
                  <span
                    className={`px-2 py-1 text-xs rounded-full ${getCategoryColor(announcement.category)}`}
                  >
                    {announcement.category === 'general' && 'Genel'}
                    {announcement.category === 'hr' && 'İK'}
                    {announcement.category === 'it' && 'IT'}
                    {announcement.category === 'event' && 'Etkinlik'}
                    {announcement.category === 'urgent' && 'Acil'}
                  </span>
                </div>
                <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
                  {announcement.excerpt}
                </p>
                <div className="flex items-center gap-4 mt-3 text-xs text-gray-500 dark:text-gray-400">
                  <span>{announcement.author.fullName}</span>
                  <span>•</span>
                  <span>{dayjs(announcement.publishDate).fromNow()}</span>
                  <span>•</span>
                  <span className="flex items-center gap-1">
                    <FaEye className="w-3 h-3" />
                    {announcement.viewCount}
                  </span>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default ImportantAnnouncements