import React from 'react';
import { FaCheckCircle, FaTimesCircle, FaDatabase, FaServer, FaFlask } from 'react-icons/fa';
import PropTypes from 'prop-types'; // สำหรับการตรวจสอบ Props (Best Practice)

// Helper Function: Mapping Icon
const IconMap = {
    FaDatabase,
    FaServer,
    FaFlask,
    FaCheckCircle,
    FaTimesCircle,
};

export default function ServiceStatus({ name, status, details, icon: Icon }) {
    const isUp = status === 'UP' || status === 'Healthy';
    const colorClass = isUp ? 'text-success' : 'text-error';
    const badgeClass = isUp ? 'badge-success' : 'badge-error';

    // Icon สำหรับแสดงสถานะ (ใช้ Check/Times Circle เป็น Fallback)
    const StatusIcon = Icon || (isUp ? FaCheckCircle : FaTimesCircle);

    return (
        <div className="flex items-center justify-between p-3 hover:bg-base-300 transition duration-150 last:border-b-0">
            <div className="flex items-center space-x-3">
                {/* Icon ของ Service */}
                <StatusIcon className={`w-5 h-5 ${colorClass}`} />
                {/* ชื่อ Service */}
                <span className="font-semibold text-base-content">{name}</span>
            </div>

            <div className="space-x-3 text-right">
                {/* Badge แสดงสถานะ */}
                <span className={`badge ${badgeClass} badge-outline text-xs hidden sm:inline`}>{status}</span>
                {/* รายละเอียด (Truncate เพื่อป้องกัน overflow) */}
                <span className="text-xs text-gray-500 max-w-[200px] inline-block truncate" title={details}>{details}</span>
            </div>
        </div>
    );
}

// กำหนด PropTypes เพื่อเพิ่มความแข็งแกร่งในการพัฒนา
ServiceStatus.propTypes = {
    name: PropTypes.string.isRequired,
    status: PropTypes.string.isRequired,
    details: PropTypes.string.isRequired,
    icon: PropTypes.elementType,
};