import Link from "next/link";
import { PageHeader } from "@/components/layout/page-header";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import {
  Globe,
  Map,
  Landmark,
  Building2,
  Layers,
  GraduationCap,
  Waves,
  ClipboardCheck,
  Tags,
  CalendarDays,
} from "lucide-react";

const masters = [
  {
    href: "/master/course/country",
    title: "Country",
    description: "Maintain the countries you offer courses in.",
    icon: Globe,
  },
  {
    href: "/master/course/state",
    title: "State",
    description: "Manage states and provinces within countries.",
    icon: Map,
  },
  {
    href: "/master/course/institute",
    title: "Institute",
    description: "Define the institutes and universities.",
    icon: Landmark,
  },
  {
    href: "/master/course/campus",
    title: "Campus",
    description: "List campuses belonging to institutes.",
    icon: Building2,
  },
  {
    href: "/master/course/program-level",
    title: "Program Level",
    description: "Categorise programs by their level.",
    icon: Layers,
  },
  {
    href: "/master/course/qualification",
    title: "Qualification",
    description: "Define qualifications awarded by courses.",
    icon: GraduationCap,
  },
  {
    href: "/master/course/stream",
    title: "Stream",
    description: "Manage academic streams and disciplines.",
    icon: Waves,
  },
  {
    href: "/master/course/requirement",
    title: "Requirement",
    description: "Maintain course entry requirements.",
    icon: ClipboardCheck,
  },
  {
    href: "/master/course/course-tag",
    title: "Course Tag",
    description: "Tag courses for easy filtering.",
    icon: Tags,
  },
  {
    href: "/master/course/intake",
    title: "Intake",
    description: "Define intake periods for courses.",
    icon: CalendarDays,
  },
];

export default function Page() {
  return (
    <div>
      <PageHeader title="Course Masters" breadcrumb="Master / Course" />
      <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>
  );
}