"use client";

import { X } from "lucide-react";
import type { SelectedItem } from "@/hooks/useStatus";
import HostDetail from "./HostDetail";
import ServiceDetail from "./ServiceDetail";
import NetworkDetail from "./NetworkDetail";
import SiteDetail from "./SiteDetail";

interface DetailPanelProps {
  item: NonNullable<SelectedItem>;
  onClose: () => void;
}

export default function DetailPanel({ item, onClose }: DetailPanelProps) {
  const title = item.type === "host" ? item.data.name :
    item.type === "service" ? item.data.name :
    item.type === "network" ? item.data.name :
    item.data.name;

  return (
    <div>
      <div className="flex items-center justify-between mb-3">
        <h3 className="text-sm font-semibold font-mono">{title}</h3>
        <button onClick={onClose} className="p-1 rounded hover:bg-zinc-800">
          <X className="w-4 h-4" />
        </button>
      </div>
      {item.type === "host" && <HostDetail host={item.data} />}
      {item.type === "service" && <ServiceDetail service={item.data} />}
      {item.type === "network" && <NetworkDetail network={item.data} />}
      {item.type === "site" && <SiteDetail site={item.data} />}
      <div className="mt-3 text-[10px] text-zinc-600 font-mono">
        Last checked: {new Date(item.data.last_checked).toLocaleString()}
      </div>
    </div>
  );
}
