"use client"

import { useTranslations } from "next-intl"
import {
  Activity,
  AlertTriangle,
  Database,
  FileText,
} from "lucide-react"

import { StatCard } from "@/shared/components/ui/stat-card"
import type { AuditOverviewStats } from "@/modules/audit/types"

interface AuditOverviewStatsBarProps {
  stats: AuditOverviewStats
}

export function AuditOverviewStatsBar({ stats }: AuditOverviewStatsBarProps): React.ReactNode {
  const t = useTranslations("audit.overview")

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <StatCard
        title={t("stats.auditEventsToday")}
        value={stats.auditEventsToday}
        icon={Activity}
        color="text-blue-500"
        valueClassName="tabular-nums"
        href="/admin/audit-logs"
      />
      <StatCard
        title={t("stats.failedLoginsToday")}
        value={stats.failedLoginsToday}
        icon={AlertTriangle}
        color="text-red-500"
        valueClassName="tabular-nums"
        highlight={stats.failedLoginsToday > 0}
        href="/admin/audit-logs/login-logs?status=failure"
      />
      <StatCard
        title={t("stats.dataChangesToday")}
        value={stats.dataChangesToday}
        icon={Database}
        color="text-emerald-500"
        valueClassName="tabular-nums"
        href="/admin/audit-logs/data-changes"
      />
      <StatCard
        title={t("stats.totalAuditLogs")}
        value={stats.totalAuditLogs}
        icon={FileText}
        color="text-purple-500"
        valueClassName="tabular-nums"
        href="/admin/audit-logs"
      />
    </div>
  )
}
