import Link from "next/link"
import { Building2, ShieldCheck, SlidersHorizontal, Users } from "lucide-react"

const cards = [
  {
    title: "Roles",
    href: "/dashboard/settings/roles",
    icon: ShieldCheck,
    description: "Manage roles and navigation permissions",
  },
  {
    title: "Users",
    href: "/dashboard/settings/users",
    icon: Users,
    description: "Create users and assign their roles",
  },
  {
    title: "Product Configuration",
    href: "/dashboard/products/settings",
    icon: SlidersHorizontal,
    description: "Configure product and master-data options",
  },
  {
    title: "Company Profile",
    href: "/dashboard/settings/company-profile",
    icon: Building2,
    description: "Invoice header, tax, and bank details",
  },
]

export default function SettingsPage() {
  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground">ERP Settings</h1>
        <p className="text-base text-muted-foreground">
          Manage ERP access, users, and system configuration.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {cards.map((card) => (
          <Link
            key={card.href}
            href={card.href}
            className="flex items-center gap-4 rounded-2xl border bg-card p-5 shadow-sm ring-1 ring-foreground/5 transition-colors hover:bg-muted"
          >
            <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10">
              <card.icon className="size-5 text-primary" />
            </div>
            <div>
              <p className="font-semibold text-foreground">{card.title}</p>
              <p className="text-sm text-muted-foreground">{card.description}</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  )
}
