import React from 'react'
import { FaKey, FaPlus } from 'react-icons/fa'
import dayjs from 'dayjs'
import { mockReservations } from '../../../mocks/mockIntranetData'

interface ActiveReservationsProps {
  onNewReservation: () => void
}

const ActiveReservations: React.FC<ActiveReservationsProps> = ({ onNewReservation }) => {
  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">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
          <FaKey className="w-5 h-5" />
          Aktif Rezervasyonlar
        </h2>
      </div>
      <div className="p-4 space-y-3">
        {mockReservations
          .filter((r) => r.status === 'approved')
          .slice(0, 3)
          .map((reservation) => (
            <div
              key={reservation.id}
              className="p-3 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800"
            >
              <div className="flex items-start justify-between mb-1">
                <h4 className="text-sm font-medium text-gray-900 dark:text-white">
                  {reservation.resourceName}
                </h4>
                <span className="text-xs px-2 py-1 bg-green-100 dark:bg-green-900/50 text-green-700 dark:text-green-300 rounded-full">
                  {reservation.type === 'room' ? '🏢' : reservation.type === 'vehicle' ? '🚗' : '⚙️'}
                </span>
              </div>
              <p className="text-xs text-gray-600 dark:text-gray-400">
                {dayjs(reservation.startDate).format('DD MMM HH:mm')} - {dayjs(reservation.endDate).format('HH:mm')}
              </p>
            </div>
          ))}
        {mockReservations.filter((r) => r.status === 'approved').length === 0 && (
          <p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
            Aktif rezervasyon yok
          </p>
        )}

        <button
          onClick={onNewReservation}
          className="w-full mt-3 px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm rounded-lg transition-colors flex items-center justify-center gap-2"
        >
          <FaPlus className="w-4 h-4" />
          Yeni Rezervasyon
        </button>
      </div>
    </div>
  )
}

export default ActiveReservations