"use client";

import React from "react";
import { Bell, Calendar, Pin } from "lucide-react";

interface ParentCircular {
  id: string;
  title: string;
  category: "STATUTORY" | "FEE" | "EXAM" | "HOLIDAY";
  date: string;
  isPinned?: boolean;
  content: string;
}

const parentCirculars: ParentCircular[] = [
  {
    id: "pc-1",
    title: "Mandatory NCHMCT 75% Attendance Requirement for Semester III Examinations",
    category: "STATUTORY",
    date: "01-Oct-2026",
    isPinned: true,
    content:
      "Parents and guardians are cordially reminded that under National Council for Hotel Management & Catering Technology regulations, every student must secure at least 75% attendance in theory and practicals separately to be eligible for the end-term practical and theory examinations. Students falling in shortage brackets risk semester repeat.",
  },
  {
    id: "pc-2",
    title: "Mid-Term Attendance Progress Reports & Parent-Teacher Briefing",
    category: "EXAM",
    date: "28-Sep-2026",
    content:
      "Mid-term progress summaries are compiled as of 30-Sep-2026. Parents of wards in the Warning or Critical tiers will be contacted for an online academic consultation session.",
  },
  {
    id: "pc-3",
    title: "Autumn Term Break & Gazetted Institutional Holidays",
    category: "HOLIDAY",
    date: "25-Sep-2026",
    content:
      "The institute will remain closed on 19-Oct-2026 (Dussehra). Practical kitchen laboratories will resume on regular schedule from 20-Oct-2026.",
  },
];

export default function ParentNoticesPage() {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="border-b border-slate-200 pb-4 dark:border-slate-800">
        <div className="flex items-center gap-1.5 text-xs text-slate-500 mb-0.5">
          <Bell className="w-3.5 h-3.5" />
          <span>Parent Communications</span>
        </div>
        <h1 className="text-xl font-bold text-slate-900 tracking-tight dark:text-slate-100">
          Institutional Circulars & Academic Advisories
        </h1>
        <p className="text-xs text-slate-500 mt-0.5">
          Official administrative circulars, statutory attendance regulations, and examination notices for parents.
        </p>
      </div>

      <div className="space-y-3">
        {parentCirculars.map((circular) => (
          <div
            key={circular.id}
            className={`p-4 rounded-lg border bg-white shadow-sm space-y-2 dark:bg-slate-900 ${
              circular.isPinned
                ? "border-blue-200 bg-blue-50/20 dark:border-blue-900 dark:bg-blue-950/20"
                : "border-slate-200 dark:border-slate-800"
            }`}
          >
            <div className="flex items-center justify-between gap-2">
              <div className="flex items-center gap-2">
                {circular.isPinned && (
                  <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-bold bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800">
                    <Pin className="w-2.5 h-2.5" />
                    IMPORTANT
                  </span>
                )}
                <span className="text-[10px] font-bold uppercase tracking-wider text-slate-500 bg-slate-100 px-2 py-0.5 rounded dark:bg-slate-800 dark:text-slate-400">
                  {circular.category}
                </span>
              </div>
              <span className="text-[11px] font-mono text-slate-500">{circular.date}</span>
            </div>

            <h3 className="text-sm font-bold text-slate-900 tracking-tight dark:text-slate-100">
              {circular.title}
            </h3>

            <p className="text-xs text-slate-600 leading-relaxed dark:text-slate-300">
              {circular.content}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
}