import { CircleHelp, Home, LayoutDashboard, LogOut, UserRound } from "lucide-react";
import { Link } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext";
import { Button } from "@/components/ui/button";

export default function TravelerMorePage() {
  const { currentUser, logout } = useAuth();
  return <div className="traveler-shell max-w-3xl space-y-8">
    <header><p className="traveler-eyebrow text-[#d85f4c]">Mon espace</p><h1 className="mt-3 text-4xl font-semibold">Mon compte</h1></header>
    <section className="surface-card p-5"><div className="flex items-center gap-3"><span className="grid h-12 w-12 place-items-center rounded-full bg-primary/10 text-primary"><UserRound /></span><div className="min-w-0"><h2 className="truncate font-semibold">{currentUser?.name}</h2><p className="truncate text-sm text-muted-foreground">{currentUser?.email}</p></div></div></section>
    <nav aria-label="Liens du compte" className="divide-y border-y border-slate-900/10"><Button asChild variant="ghost" className="h-14 w-full justify-start rounded-none"><Link to="/voyageur/dashboard"><LayoutDashboard className="mr-3 h-4 w-4" />Aujourd’hui</Link></Button><Button asChild variant="ghost" className="h-14 w-full justify-start rounded-none"><Link to="/about"><CircleHelp className="mr-3 h-4 w-4" />Aide</Link></Button><Button asChild variant="ghost" className="h-14 w-full justify-start rounded-none"><Link to="/"><Home className="mr-3 h-4 w-4" />Accueil TripTales</Link></Button><Button variant="ghost" className="h-14 w-full justify-start rounded-none text-destructive hover:text-destructive" onClick={() => void logout()}><LogOut className="mr-3 h-4 w-4" />Se déconnecter</Button></nav>
  </div>;
}