import StatsPanel from "@/components/panels-components/StatsPanel";

/** Minimalist dark */
<StatsPanel
  stats={[
    { key: "users", label: "Users", value: "1,284", delta: "+8%" },
    { key: "conv", label: "Conv.", value: "4.2%", delta: "+0.3pp" },
  ]}
  cols={{ base: 1, md: 2 }}
  cardBg="bg-neutral-900"
  cardBorder="border-neutral-800"
/>

/** Light complex */
<StatsPanel
  stats={[
    { key: "mrr", label: "MRR", value: "€12,430", delta: "+€920" },
    { key: "subs", label: "Subscrieri", value: "430", delta: "+12" },
    { key: "churn", label: "Churn", value: "5.2%", delta: "-0.4pp" },
    { key: "ltv", label: "LTV", value: "€240", delta: "+€30" },
  ]}
  cols={{ base: 1, md: 2, xl: 4 }}
  cardBg="bg-white"
  cardBorder="border-zinc-200"
/>

/** Dark v2 */
<StatsPanel
  stats={[
    { key: "uptime", label: "Uptime", value: "99.99%", delta: "+0.01%" },
    { key: "errors", label: "Errors", value: "23", delta: "-5" },
    { key: "latency", label: "Latency", value: "120ms", delta: "-20ms" },
  ]}
  cols={{ base: 1, md: 3 }}
  cardBg="bg-neutral-900"
  cardBorder="border-neutral-800"
/>

import TablePanel from "@/components/panels-components/TablePanel";

/** Minimalist dark */
<TablePanel
  columns={[
    { key: "id", header: "ID" },
    { key: "name", header: "Nume" },
    { key: "status", header: "Status" },
  ]}
  rows={[
    { id: "1", name: "Produs A", status: "active" },
    { id: "2", name: "Produs B", status: "paused" },
  ]}
/>

/** Light complex */
<TablePanel
  columns={[
    { key: "id", header: "ID" },
    { key: "name", header: "Produs" },
    { key: "status", header: "Status" },
    { key: "updatedAt", header: "Actualizat" },
  ]}
  rows={[
    { id: "PRD-1012", name: "Abonament Pro", status: "active", updatedAt: "2025-09-20" },
    { id: "PRD-1013", name: "SQL 101", status: "paused", updatedAt: "2025-09-18" },
  ]}
/>

/** Dark v2 (custom render) */
<TablePanel
  columns={[
    { key: "id", header: "ID" },
    { key: "event", header: "Event" },
    { key: "severity", header: "Severity", render: (r: { id: string; event: string; severity: string }) => <b>{r.severity}</b> },
  ]}
  rows={[
    { id: "EVT-22", event: "Login fail", severity: "high" },
    { id: "EVT-23", event: "API timeout", severity: "medium" },
  ]}
/>

// Minimalist dark
<SettingsPanel
    layout="vertical"
    bgColor="bg-neutral-950"
    borderColor="border-neutral-800"
    textColor="text-neutral-100"
    rounded="rounded-lg"
    padding="p-4"
    gap="space-y-3"
    options={[
        { key: "dm", label: "Dark mode", defaultValue: true },
        { key: "alerts", label: "Alerte critice", defaultValue: true },
    ]}
    buttonLabel="Save"
    buttonClassName="rounded-md border border-neutral-800 px-3 py-1.5 text-sm text-neutral-200 hover:bg-neutral-900"
/>

// Light complex (2 coloane)
<SettingsPanel
    layout="horizontal"
    bgColor="bg-white"
    borderColor="border-zinc-200"
    textColor="text-black"
    rounded="rounded-xl"
    padding="p-6"
    gap="space-y-6"
    options={[
        { key: "weekly", label: "Raport săptămânal", defaultValue: true, description: "Trimis în fiecare luni la 09:00." },
        { key: "monthly", label: "Raport lunar", defaultValue: false, description: "Rezumat KPI + trenduri." },
        { key: "beta", label: "Program beta", defaultValue: false, description: "Funcționalități înainte de lansare." },
        { key: "newsletter", label: "Newsletter", defaultValue: true, description: "Noutăți și articole." },
    ]}
    buttonLabel="Aplică preferințele"
    buttonClassName="rounded-md border border-zinc-200 bg-white px-4 py-2 text-sm hover:bg-zinc-50 text-black"
/>

// Dark v2
<SettingsPanel
    layout="vertical"
    bgColor="bg-neutral-950"
    borderColor="border-neutral-800"
    textColor="text-neutral-100"
    rounded="rounded-lg"
    padding="p-5"
    gap="space-y-4"
    options={[
        { key: "twofa", label: "2FA", defaultValue: true, description: "Securitate suplimentară la login." },
        { key: "emails", label: "Emailuri tranzacționale", defaultValue: true },
        { key: "productUpdates", label: "Product updates", defaultValue: false },
    ]}
    buttonLabel="Save changes"
    buttonClassName="rounded-md border border-neutral-800 px-4 py-2 text-sm text-neutral-100 hover:bg-neutral-900"
/>