import Table from 'react-bootstrap/Table';

const MetricsTable = ({ metrics = [] }) => {
  return (
    <div style={{ overflowX: "auto", maxHeight: "450px", overflowY: "auto", position: "relative", borderTop: "1px solid #444", backgroundColor: "#1e1e1e" }}>
      <Table striped bordered hover responsive variant='dark' style={{ fontFamily: 'Poppins, sans-serif', minWidth: "900px", backgroundColor: "#1e1e1e", color: "#ffffff" }}>
        <thead>
          <tr style={{ backgroundColor: "#333333", color: "#ffffff" }}>
            <th className="py-3 text-center align-middle">Monitor Name</th>
            <th className="py-3 text-center align-middle">URL</th>
            <th className="py-3 text-center align-middle">Response Time (ms)</th>
            <th className="py-3 text-center align-middle">Status</th>
            <th className="py-3 text-center align-middle">Certificate Valid</th>
            <th className="py-3 text-center align-middle">Cert Days Remaining</th>
          </tr>
        </thead>
        <tbody>
          {metrics.map((item, index) => (
            <tr key={index} style={{ backgroundColor: "#222222", color: "#ffffff" }}>
              <td>{item.monitor_name}</td>
              <td><a href={item.monitor_url} target="_blank" rel="noopener noreferrer" style={{ color: "#4CAF50" }}>{item.monitor_url}</a></td>
              <td>{item.response_time} ms</td>
              <td>
                {item.status === 1 ? 'UP' :
                item.status === 0 ? 'DOWN' :
                item.status === 2 ? 'PENDING' : 'MAINTENANCE'}
              </td>
              <td>{item.cert_valid === 1 ? 'Yes' : 'No'}</td>
              <td>{item.cert_days_remaining}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    </div>
  );
};

export default MetricsTable;