"use client";

import type { StatusSiteInfo } from "@/lib/types";

export default function SiteDetail({ site }: { site: StatusSiteInfo }) {
  const statusColor = site.status === "up" ? "text-emerald-400" : site.status === "down" ? "text-red-400" : "text-amber-400";
  const sslColor = site.ssl_days_remaining === null ? "text-zinc-500" :
    site.ssl_days_remaining < 7 ? "text-red-400" :
    site.ssl_days_remaining < 30 ? "text-amber-400" : "text-emerald-400";

  return (
    <div className="flex flex-col gap-2 text-sm">
      <div>
        <span className="text-zinc-500 text-xs">URL</span>
        <a href={site.url} target="_blank" rel="noopener noreferrer" className="block text-blue-400 hover:underline text-xs truncate">
          {site.url}
        </a>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">Status</span>
        <span className={`font-mono ${statusColor}`}>{site.status}</span>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">HTTP</span>
        <span className="font-mono">{site.http_status_code || "—"}</span>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">Response</span>
        <span>{site.response_time_ms}ms</span>
      </div>
      <div className="flex justify-between">
        <span className="text-zinc-500">SSL Expiry</span>
        <span className={sslColor}>
          {site.ssl_days_remaining !== null ? `${site.ssl_days_remaining}d` : "—"}
        </span>
      </div>
    </div>
  );
}
