"use client"

import type { CertificateView } from "@/lib/certificate-view"

function CertificateExpandedDetail({ cert }: { cert: CertificateView }) {
  return (
    <div className="min-w-0 [overflow-wrap:anywhere] px-5 sm:px-10 pb-4 grid grid-cols-2 sm:grid-cols-4 gap-4 text-xs border-t border-border/50 pt-3">
      <div>
        <p className="text-muted-foreground mb-1">Размер ключа</p>
        <p className="font-mono font-medium">{cert.keySize === null ? "Неизвестен" : cert.keySize + " бит"}</p>
      </div>
      <div>
        <p className="text-muted-foreground mb-1">Начало срока</p>
        <p className="font-mono">{cert.validFrom ?? "Дата неизвестна"}</p>
      </div>
      <div>
        <p className="text-muted-foreground mb-1">Дополнительные имена (SAN)</p>
        <div className="flex flex-wrap gap-1">
          {cert.sans.length > 0
            ? cert.sans.map((s) => (
                <span key={s} className="font-mono bg-muted px-1.5 py-0.5 rounded">
                  {s}
                </span>
              ))
            : <span className="text-muted-foreground">—</span>}
        </div>
      </div>
      <div>
        <p className="text-muted-foreground mb-1">Доверие</p>
        <p className={cert.trusted === null ? "text-muted-foreground" : cert.trusted ? "text-success" : "text-destructive"}>
          {cert.trusted === null ? "Неизвестно" : cert.trusted ? "Да (доверенный)" : "Нет (не доверенный)"}
        </p>
      </div>
      {"rawValidFrom" in cert && !cert.validFrom && cert.rawValidFrom && <p className="col-span-2 sm:col-span-4 text-muted-foreground">Начало срока не удалось определить. Значение RouterOS: <span className="font-mono">{cert.rawValidFrom}</span></p>}
      {"rawValidUntil" in cert && !cert.validUntil && cert.rawValidUntil && <p className="col-span-2 sm:col-span-4 text-muted-foreground">Окончание срока не удалось определить. Значение RouterOS: <span className="font-mono">{cert.rawValidUntil}</span></p>}
    </div>
  )
}

export { CertificateExpandedDetail }