import { formatBytes } from "@/lib/format";
import type { Health } from "@/lib/types";

const STATE_CLASSES: Record<Health["disk"]["state"], string> = {
	ok: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300",
	warn: "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300",
	critical: "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300",
};

export default function DiskCard({ disk }: { disk: Health["disk"] }) {
	return (
		<section className="rounded border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900">
			<h2 className="flex items-center justify-between text-sm font-semibold">
				Disk
				<span className={`rounded px-2 py-0.5 text-xs font-medium ${STATE_CLASSES[disk.state]}`}>
					{disk.state}
				</span>
			</h2>
			<dl className="mt-3 space-y-2 text-sm">
				<div className="flex justify-between">
					<dt className="text-zinc-500">Free</dt>
					<dd className="tabular-nums">{formatBytes(disk.free_bytes)}</dd>
				</div>
				<div className="flex justify-between">
					<dt className="text-zinc-500">Database</dt>
					<dd className="tabular-nums">{formatBytes(disk.db_bytes)}</dd>
				</div>
				<div className="flex justify-between">
					<dt className="text-zinc-500">Logs</dt>
					<dd className="tabular-nums">{formatBytes(disk.log_bytes)}</dd>
				</div>
			</dl>
		</section>
	);
}
