import Link from "next/link"
import { BookText, Inbox, Wallet, 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: "Cash / Bank Accounts",
    description: "Cash and Bank accounts linked to a GL account — list, create, and reconcile against them.",
    href: "/dashboard/accounts/bank-accounts",
    icon: Wallet,
  },
  {
    title: "Cheque Books",
    description: "Cheque books issued from this company’s own supply — issue, clear, bounce, cancel or void a leaf.",
    href: "/dashboard/accounts/cheque-books",
    icon: BookText,
  },
  {
    title: "Received Cheques",
    description: "Cheques received from customers/suppliers — deposit, clear, return, or cancel.",
    href: "/dashboard/accounts/received-cheques",
    icon: Inbox,
  },
]

export default function AccountsHubPage() {
  return (
    <div className="flex flex-col gap-6">
      <div>
        <h1 className="text-2xl font-bold text-foreground">Accounts</h1>
        <p className="text-base text-muted-foreground">
          Cash/Bank accounts and cheque management, from the General Ledger service.
        </p>
      </div>

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
        {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>
  )
}
