import React from 'react';
import TitleCard from '../TitleCard';
import { FaDatabase, FaServer, FaFlask } from 'react-icons/fa';
import ServiceStatus from '../ServiceStatus';

const infrastructureServicesMap = [
    { key: 'database', name: 'CockroachDB', icon: FaDatabase },
    { key: 'cache', name: 'Redis Cache', icon: FaServer },
    { key: 'storage', name: 'MinIO S3', icon: FaServer },
    { key: 'ai_service', name: 'MONAI FastAPI (Instance)', icon: FaFlask },
];

const InfraStatusCard = ({ serviceData }) => {
    return (
        <div className="card bg-base-200 shadow-md">
            <h3 className="card-title p-4 pb-0 text-base-content">Infrastructure Status</h3>
            <div className="card-body p-0 divide-y divide-base-300">
                {infrastructureServicesMap.map((service) => {
                    const svc = serviceData?.[service.key];
                    if (!svc) return null;
                    return (
                        <ServiceStatus
                            key={service.key}
                            name={service.name}
                            status={svc.status}
                            details={svc.details}
                            icon={service.icon}
                        />
                    );
                })}
            </div>
        </div>
    );
};

export default InfraStatusCard;