import Link from "next/link";
import { PageHeader } from "@/components/layout/page-header";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import {
  FileText,
  ListChecks,
  Landmark,
  Plane,
  Banknote,
  Coins,
  Layers,
  Layers3,
  ReceiptText,
  CircleDollarSign,
} from "lucide-react";

const masters = [
  {
    href: "/master/finance/application-type",
    title: "Application Type",
    description: "Define the types of student applications.",
    icon: FileText,
  },
  {
    href: "/master/finance/application-status",
    title: "Application Status",
    description: "Manage application status stages.",
    icon: ListChecks,
  },
  {
    href: "/master/finance/education-loan-status",
    title: "Education Loan Status",
    description: "Track education loan inquiry statuses.",
    icon: Landmark,
  },
  {
    href: "/master/finance/visa-status",
    title: "Visa Status",
    description: "Maintain visa application statuses.",
    icon: Plane,
  },
  {
    href: "/master/finance/banking",
    title: "Banking Details",
    description: "Manage bank accounts used for collections.",
    icon: Banknote,
  },
  {
    href: "/master/finance/currency-rate",
    title: "Currency Rate",
    description: "Set conversion rates between currencies.",
    icon: Coins,
  },
  {
    href: "/master/finance/plans-main",
    title: "Plans (Main)",
    description: "Define top-level service plans.",
    icon: Layers,
  },
  {
    href: "/master/finance/plans-sub",
    title: "Plans (Sub)",
    description: "Configure sub-plans and their amounts.",
    icon: Layers3,
  },
  {
    href: "/master/finance/expense-type",
    title: "Expense Type",
    description: "Categorise business expenses.",
    icon: ReceiptText,
  },
  {
    href: "/master/finance/account-status",
    title: "Account Status",
    description: "Manage account status options.",
    icon: CircleDollarSign,
  },
];

export default function Page() {
  return (
    <div>
      <PageHeader title="Finance & Status Masters" breadcrumb="Master / Finance" />
      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {masters.map((m) => {
          const Icon = m.icon;
          return (
            <Link key={m.href} href={m.href} className="group/link">
              <Card className="h-full transition-shadow group-hover/link:ring-brand-blue/40 group-hover/link:shadow-md">
                <CardHeader>
                  <div className="mb-2 inline-flex size-10 items-center justify-center rounded-lg bg-brand-navy text-white">
                    <Icon className="size-5 text-brand-orange" />
                  </div>
                  <CardTitle className="text-brand-blue">{m.title}</CardTitle>
                  <CardDescription>{m.description}</CardDescription>
                </CardHeader>
              </Card>
            </Link>
          );
        })}
      </div>
    </div>
  );
}