"use client"

import Link from "next/link"
import { Building2, CalendarClock, FileText, ListTree, Percent, Sigma, Users } from "lucide-react"

const cards = [
  { title: "Branches", href: "/dashboard/hrm/settings/branches", icon: Building2, desc: "Company locations" },
  { title: "Departments", href: "/dashboard/hrm/settings/departments", icon: ListTree, desc: "Org structure" },
  { title: "Designations", href: "/dashboard/hrm/settings/designations", icon: Users, desc: "Job titles" },
  { title: "Employment Types", href: "/dashboard/hrm/settings/employment-types", icon: Users, desc: "Permanent, Contract, etc." },
  { title: "Work Shifts", href: "/dashboard/hrm/settings/work-shifts", icon: CalendarClock, desc: "Attendance baseline" },
  { title: "Document Types", href: "/dashboard/hrm/settings/document-types", icon: FileText, desc: "Staff document catalog" },
  { title: "Leave Types", href: "/dashboard/hrm/settings/leave-types", icon: CalendarClock, desc: "Annual, Casual, Medical…" },
  { title: "Salary Components", href: "/dashboard/hrm/settings/salary-components", icon: Sigma, desc: "Allowances & deductions" },
  { title: "Statutory Settings", href: "/dashboard/hrm/settings/statutory", icon: Percent, desc: "EPF/ETF rates & tax slabs" },
]

export default function HrmSettingsPage() {
  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground">HRM Settings</h1>
        <p className="text-base text-muted-foreground">Masters and configuration used across Employees, Attendance, Leave, and Payroll.</p>
      </div>
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {cards.map((c) => (
          <Link
            key={c.href}
            href={c.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">
              <c.icon className="size-5 text-primary" />
            </div>
            <div>
              <p className="font-semibold text-foreground">{c.title}</p>
              <p className="text-sm text-muted-foreground">{c.desc}</p>
            </div>
          </Link>
        ))}
      </div>
    </div>
  )
}
