// src/layouts/DashboardLayout.tsx
import { type ReactNode } from "react";
import { motion } from "framer-motion";
import { FaHome, FaUser, FaCog, FaSignOutAlt } from "react-icons/fa";
import { Link, Outlet } from "react-router-dom";

export default function DashboardLayout() {
  return (
  <div className="flex h-screen bg-black text-white">
      {/* Sidebar */}
      <motion.aside
        initial={{ x: -250 }}
        animate={{ x: 0 }}
        transition={{ duration: 0.4 }}
  className="w-64 bg-zinc-900 shadow-xl flex flex-col"
      >
        <div className="p-4 font-bold text-xl border-b border-gray-800">
          MyDashboard
        </div>
        <nav className="flex-1 p-4 space-y-2">
          <SidebarLink to="/" icon={<FaHome />} label="Home" />
          <SidebarLink to="/profile" icon={<FaUser />} label="Profile" />
          <SidebarLink to="/settings" icon={<FaCog />} label="Settings" />
        </nav>
        <div className="p-4 border-t border-gray-800">
          <SidebarLink to="/logout" icon={<FaSignOutAlt />} label="Logout" />
        </div>
      </motion.aside>

      {/* Main content */}
      <div className="flex flex-col flex-1">
        {/* Top Navbar */}
        <motion.header
          initial={{ y: -80 }}
          animate={{ y: 0 }}
          transition={{ duration: 0.3 }}
          className="bg-zinc-950 shadow px-6 py-3 flex justify-between items-center border-b border-gray-800"
        >
          <h1 className="text-lg font-semibold">Dashboard</h1>
          <div className="flex items-center space-x-4">
            <span className="text-white/80">Welcome back!</span>
            <img
              src="https://ui-avatars.com/api/?name=User&background=0D8ABC&color=fff"
              alt="avatar"
              className="w-8 h-8 rounded-full"
            />
          </div>
        </motion.header>

        {/* Content area */}
        <motion.main
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5 }}
          className="flex-1 overflow-y-auto p-6 bg-black"
        >
          <Outlet />
        </motion.main>
      </div>
    </div>
  );
}

interface SidebarLinkProps {
  to: string;
  icon: ReactNode;
  label: string;
}

function SidebarLink({ to, icon, label }: SidebarLinkProps) {
  return (
    <Link
      to={to}
      className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-white/10 hover:text-white transition-colors"
    >
      <span className="text-lg">{icon}</span>
      <span className="text-sm font-medium">{label}</span>
    </Link>
  );
}