import React from 'react';
import { FaFlask, FaCheckCircle, FaTimesCircle } from 'react-icons/fa';
import ServiceStatus from '../ServiceStatus';

const ModelEndpointsStatus = ({ modelData }) => {
    const models = modelData.models || [];

    if (models.length === 0) {
        return <p className="text-center text-gray-500 p-4">ไม่พบ Model ที่มีสถานะ ACTIVE</p>;
    }

    return (
        <div className="mt-6">
            <h3 className="text-xl font-semibold mb-3 flex items-center space-x-2 text-base-content">
                <FaFlask className="text-primary" />
                <span>สถานะ Model Endpoints ({models.length} รายการ)</span>
            </h3>
            <div className="bg-base-100 shadow-inner rounded-lg border border-base-300 divide-y divide-base-200">
                {models.map((model) => (
                    <ServiceStatus
                        key={model.id}
                        name={`${model.name} (v${model.model_version})`}
                        status={model.status}
                        // แสดง Latency หรือ Detail ของ Check
                        details={model.details}
                        icon={model.status === 'UP' ? FaCheckCircle : FaTimesCircle}
                    />
                ))}
            </div>
        </div>
    );
};

export default ModelEndpointsStatus;