import Link from "next/link";

const sections = [
  { title: "Profile", description: "View your account information and group memberships", icon: "ph-user-circle", href: "/profile", color: "primary" },
  { title: "Settings", description: "Language, timezone, theme, notifications, email and calendar", icon: "ph-gear", href: "/settings", color: "secondary" },
  { title: "Security", description: "Two-factor authentication, login sessions, and security log", icon: "ph-shield-check", href: "/security", color: "success" },
  { title: "Privacy", description: "Profile visibility, data tracking, and communication preferences", icon: "ph-lock-key", href: "/privacy", color: "warning" },
  { title: "Analytics", description: "Login history, app usage, and activity log", icon: "ph-chart-line-up", href: "/analytics", color: "info" },
  { title: "Voice", description: "Call forwarding, voicemail, music on hold, and extension settings", icon: "ph-phone", href: "/voice", color: "danger" },
  { title: "AI Agent", description: "Configure your personal AI assistant persona and behavior", icon: "ph-robot", href: "/agent", color: "dark" },
];

export default function MyDashboard() {
  return (
    <>
      <div className="mb-4">
        <h4 className="mb-1">
          <i className="ph-sliders-horizontal me-2"></i>
          My Settings
        </h4>
        <p className="text-muted mb-0">Manage your personal account settings and preferences.</p>
      </div>

      <div className="row">
        {sections.map((section) => (
          <div key={section.href} className="col-md-6 col-xl-4 mb-3">
            <Link href={section.href} className="text-decoration-none">
              <div className="card h-100 border-0 shadow-sm card-hover">
                <div className="card-body">
                  <div className="d-flex align-items-center mb-3">
                    <div
                      className={`bg-${section.color} bg-opacity-10 text-${section.color} rounded-pill d-flex align-items-center justify-content-center me-3`}
                      style={{ width: "48px", height: "48px" }}
                    >
                      <i className={`${section.icon} fs-4`}></i>
                    </div>
                    <h5 className="mb-0 text-body">{section.title}</h5>
                  </div>
                  <p className="text-muted mb-0 small">{section.description}</p>
                </div>
              </div>
            </Link>
          </div>
        ))}
      </div>
    </>
  );
}
