text: import config from '../../config.yaml'
  import MonitorStatusLabel from './monitorStatusLabel'
  import MonitorHistogram from './monitorHistogram'
  
  const infoIcon = (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      className="h-5 mr-2 mx-auto text-blue-500 dark:text-blue-400"
    >
      <path
        fillRule="evenodd"
        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
        clipRule="evenodd"
      />
    </svg>
  )
  
  export default function MonitorCard({ key, monitor, data }) {
    return (
      <div key={key} className="card">
        <div className="flex flex-row justify-between items-center mb-2">
          <div className="flex flex-row items-center align-center">
            {monitor.description && (
              <div className="tooltip">
                {infoIcon}
                <div className="content text-center transform -translate-y-1/2 top-1/2 ml-8 w-72 text-sm object-left">
                  {monitor.description}
                </div>
              </div>
            )}
            <a href={monitor.url} target="_blank">
              <div className="text-xl">{monitor.name}</div>
            </a>
          </div>
          <MonitorStatusLabel kvMonitor={data} />
        </div>
  
        <MonitorHistogram monitorId={monitor.id} kvMonitor={data} />
  
        <div className="flex flex-row justify-between items-center text-gray-400 text-sm">
          <div>{config.settings.daysInHistogram} 天前</div>
          <div>今天</div>
        </div>
      </div>
    )
  }
  