'use client'

import Link from 'next/link'
import { LayoutDashboard, Home, User, Briefcase, LogOut } from 'lucide-react'
import { signOut } from 'next-auth/react'

const links = [
  { href: '/agent', label: 'Dashboard', icon: LayoutDashboard },
  { href: '/agent/listings/new', label: 'New Listing', icon: Home },
  { href: '/agent/crm', label: 'CRM', icon: Briefcase },
  { href: '/agent/profile', label: 'Profile', icon: User },
]

interface AgentSidebarProps {
  name: string
  email: string
}

export function AgentSidebar({ name, email }: AgentSidebarProps) {
  return (
    <aside className="w-64 bg-[#1D2019] text-white min-h-screen p-6 flex flex-col">
      <h2 className="text-xl font-bold mb-8">Agent Portal</h2>
      <nav className="space-y-2 flex-1">
        {links.map(({ href, label, icon: Icon }) => (
          <Link
            key={href}
            href={href}
            className="flex items-center gap-3 px-4 py-2 rounded-lg hover:bg-[#374527] transition"
          >
            <Icon size={18} />
            {label}
          </Link>
        ))}
      </nav>
      <div className="border-t border-gray-700 pt-4">
        <p className="text-sm font-medium truncate">{name}</p>
        <p className="text-xs text-gray-400 mb-3 truncate">{email}</p>
        <button
          onClick={() => signOut({ callbackUrl: '/login' })}
          className="flex items-center gap-2 text-sm text-gray-300 hover:text-white transition"
        >
          <LogOut size={16} />
          Sign out
        </button>
      </div>
    </aside>
  )
}