import Link from "next/link"
import { ClipboardList, FileText, PackageX, ShoppingCart, type LucideIcon } from "lucide-react"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

const areas: { title: string; description: string; href: string; icon: LucideIcon }[] = [
  {
    title: "Requisitions",
    description: "Raise a purchase requisition and submit it into procurement.",
    href: "/dashboard/procurement/requisitions",
    icon: ClipboardList,
  },
  {
    title: "RFQs",
    description: "Request quotations from vendors, record pricing, and compare side by side.",
    href: "/dashboard/procurement/rfqs",
    icon: FileText,
  },
  {
    title: "Purchase Orders",
    description: "Auto-approved on creation, freely editable while open, cancellable before receipt.",
    href: "/dashboard/procurement/purchase-orders",
    icon: ShoppingCart,
  },
  {
    title: "Purchase Returns",
    description: "Return received goods to a vendor, referencing the original GRN line.",
    href: "/dashboard/procurement/purchase-returns",
    icon: PackageX,
  },
]

export default function ProcurementHubPage() {
  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground">Procurement</h1>
        <p className="text-base text-muted-foreground">
          Requisition → RFQ (optional) → Purchase Order → Purchase Return (FR-PROC-01..09).
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        {areas.map((area) => (
          <Link key={area.href} href={area.href}>
            <Card className="h-full transition-shadow hover:shadow-md">
              <CardHeader>
                <div className="flex items-center gap-3">
                  <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
                    <area.icon className="size-5" />
                  </div>
                  <CardTitle className="text-lg">{area.title}</CardTitle>
                </div>
              </CardHeader>
              <CardContent>
                <p className="text-base text-muted-foreground">{area.description}</p>
              </CardContent>
            </Card>
          </Link>
        ))}
      </div>
    </div>
  )
}
