import React from "react";
import Link from "next/link";
import { Bell, ArrowRight, Calendar, AlertCircle } from "lucide-react";
import { SchoolAnnouncementItem } from "@/data/mockDashboardData";
import { Badge } from "@/components/ui/Badge";
import { cn } from "@/lib/utils";

interface AnnouncementsCardProps {
  announcements: SchoolAnnouncementItem[];
  className?: string;
}

export const AnnouncementsCard: React.FC<AnnouncementsCardProps> = ({
  announcements,
  className,
}) => {
  return (
    <div
      className={cn(
        "bg-white rounded-xl border border-brand-border shadow-card flex flex-col justify-between overflow-hidden",
        className
      )}
    >
      {/* Header */}
      <div className="p-5 border-b border-brand-border flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-lg bg-amber-50 border border-amber-200 text-amber-600 flex items-center justify-center">
            <Bell className="w-4 h-4" />
          </div>
          <div>
            <h3 className="text-base font-bold text-brand-text leading-tight">
              Pengumuman Terbaru
            </h3>
            <p className="text-[11px] text-brand-secondary">
              Agenda & edaran civitas akademika
            </p>
          </div>
        </div>

        <Link
          href="/pengumuman"
          className="text-xs text-brand-blue font-semibold hover:underline flex items-center gap-1"
        >
          <span>Semua</span>
          <ArrowRight className="w-3 h-3" />
        </Link>
      </div>

      {/* Announcements List */}
      <div className="p-5 space-y-4">
        {announcements.map((item) => (
          <div
            key={item.id}
            className="p-3.5 rounded-lg border border-brand-border bg-slate-50/60 hover:bg-slate-50 transition-colors space-y-2"
          >
            <div className="flex items-start justify-between gap-2">
              <Badge
                variant={item.priority === "tinggi" ? "danger" : "default"}
                size="sm"
              >
                {item.category}
              </Badge>
              <span className="text-[11px] text-slate-400 font-medium flex items-center gap-1 shrink-0">
                <Calendar className="w-3 h-3" />
                {item.date}
              </span>
            </div>

            <h4 className="text-xs font-bold text-brand-text leading-snug">
              {item.title}
            </h4>

            <p className="text-xs text-brand-secondary leading-relaxed line-clamp-2">
              {item.summary}
            </p>

            <div className="pt-1 flex items-center justify-between text-[11px] text-slate-500">
              <span>{item.author}</span>
              <Link
                href="/pengumuman"
                className="text-brand-blue font-semibold hover:underline"
              >
                Rincian
              </Link>
            </div>
          </div>
        ))}
      </div>

      {/* Footer info */}
      <div className="p-3.5 bg-slate-50 border-t border-brand-border flex items-center gap-2 text-xs text-brand-secondary">
        <AlertCircle className="w-4 h-4 text-brand-blue shrink-0" />
        <span>Surat edaran disinkronkan ke seluruh portal wali kelas.</span>
      </div>
    </div>
  );
};