import React from 'react';
import Image from 'next/image';

interface MonitoringProps {
  objectId?: string;
  onClose?: () => void;
}

const Monitoring: React.FC<MonitoringProps> = ({ onClose }) => {
  return (
    <div className="w-full"> 
      <div className="bg-[rgb(22,24,36)] rounded-[12px] p-4 space-y-4"> 
        <div className="flex items-center justify-between">
          <h2 className="text-white text-2xl font-semibold">Зоны мониторинга</h2>
          {onClose && (
            <button 
              onClick={onClose}
              className="text-white hover:text-gray-300 transition-colors"
            >
              <svg className="w-6 h-6" 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 className="bg-[rgb(158,168,183)] rounded-lg p-3 h-[200px] flex items-center justify-center">
          <div className="w-full h-full bg-gray-300 rounded flex items-center justify-center">
            <Image 
              src="/images/test_image.png"
              alt="Object Model"
              width={200}
              height={200}
              className="max-w-full max-h-full object-contain"
              style={{ height: 'auto' }}
              onError={(e) => {
                const target = e.target as HTMLImageElement;
                target.style.display = 'none';
              }}
            />
          </div>
        </div>
 
        <div className="grid grid-cols-2 gap-3">
          {[1, 2, 3, 4, 5, 6].map((zone) => (
            <div key={zone} className="flex-1 bg-gray-300 rounded-lg h-[120px] flex items-center justify-center">
              <div className="w-full h-full bg-gray-200 rounded flex items-center justify-center">
                <Image 
                  src="/images/test_image.png"
                  alt={`Зона ${zone}`}
                  width={120}
                  height={120}
                  className="max-w-full max-h-full object-contain opacity-50"
                  style={{ height: 'auto' }}
                  onError={(e) => {
                    const target = e.target as HTMLImageElement;
                    target.style.display = 'none';
                  }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default Monitoring;