"use client"

import Link from "next/link"
import { signOut } from "next-auth/react"

type Props = {
  userName: string | null | undefined
  userEmail: string | null | undefined
  extraLinks?: { label: string; href: string; icon?: React.ReactNode }[]
}


export function DashboardNav({ userName, userEmail, extraLinks = [] }: Props) {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "0.75rem",
        flexWrap: "wrap",
      }}
    >
      <Link
        href="/dashboard/map"
        style={{
          padding: "0.65rem 1.1rem",
          borderRadius: "var(--radius-md)",
          background: "var(--surface-color)",
          border: "1px solid var(--border-color)",
          color: "var(--text-main)",
          fontWeight: 500,
          fontSize: "0.9rem",
          display: "flex",
          alignItems: "center",
          gap: "0.4rem",
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polygon points="3 11 22 2 13 21 11 13 3 11" />
        </svg>
        Hartă
      </Link>

      <Link
        href="/account/settings"
        title={`${userName || userEmail} — Setări cont`}
        style={{
          padding: "0.65rem 1.1rem",
          borderRadius: "var(--radius-md)",
          background: "var(--surface-color)",
          border: "1px solid var(--border-color)",
          color: "var(--text-main)",
          fontWeight: 500,
          fontSize: "0.9rem",
          display: "flex",
          alignItems: "center",
          gap: "0.4rem",
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
          <circle cx="12" cy="7" r="4" />
        </svg>
        Contul meu
      </Link>

      {extraLinks.map((link) => (
        <Link
          key={link.href}
          href={link.href}
          style={{
            padding: "0.65rem 1.1rem",
            borderRadius: "var(--radius-md)",
            background: "var(--surface-color)",
            border: "1px solid var(--border-color)",
            color: "var(--text-main)",
            fontWeight: 500,
            fontSize: "0.9rem",
            display: "flex",
            alignItems: "center",
            gap: "0.4rem",
          }}
        >
          {link.icon && link.icon}
          {link.label}
        </Link>

      ))}

      <button
        onClick={() => signOut({ callbackUrl: "/rovibe/" })}
        style={{
          padding: "0.65rem 1.1rem",
          borderRadius: "var(--radius-md)",
          background: "rgba(239,68,68,0.08)",
          border: "1px solid rgba(239,68,68,0.3)",
          color: "var(--danger)",
          fontWeight: 600,
          fontSize: "0.9rem",
          cursor: "pointer",
          display: "flex",
          alignItems: "center",
          gap: "0.4rem",
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
          <polyline points="16 17 21 12 16 7" />
          <line x1="21" y1="12" x2="9" y2="12" />
        </svg>
        Ieși din cont
      </button>
    </div>
  )
}