'use client'

import { signOut, useSession } from 'next-auth/react'
import { ArrowRightOnRectangleIcon } from '@heroicons/react/24/outline'

export default function Header({ title }: { title?: string }) {
  const { data: session } = useSession()

  return (
    <header className="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
      <h2 className="text-gray-800 font-semibold text-lg">{title ?? 'Intranet'}</h2>
      <div className="flex items-center gap-4">
        <span className="text-sm text-gray-600">{session?.user?.name}</span>
        <button
          onClick={() => signOut({ callbackUrl: '/login' })}
          className="flex items-center gap-1 text-sm text-gray-500 hover:text-red-600 transition-colors"
        >
          <ArrowRightOnRectangleIcon className="w-4 h-4" />
          Salir
        </button>
      </div>
    </header>
  )
}