"use client"

import Link from "next/link"
import { Badge } from "@/shared/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { formatDate } from "@/shared/lib/utils"
import type { Announcement } from "../types"

const STATUS_LABEL: Record<Announcement["status"], string> = {
  draft: "Draft",
  published: "Published",
  archived: "Archived",
}

const STATUS_VARIANT: Record<
  Announcement["status"],
  "default" | "secondary" | "outline"
> = {
  draft: "secondary",
  published: "default",
  archived: "outline",
}

const TYPE_LABEL: Record<Announcement["type"], string> = {
  school: "School",
  grade: "Grade",
  class: "Class",
}

export function AnnouncementCard({
  announcement,
  href,
}: {
  announcement: Announcement
  href?: string
}) {
  const card = (
    <Card className="h-full transition-colors hover:bg-accent/50">
      <CardHeader className="flex flex-row items-start justify-between gap-2 space-y-0">
        <CardTitle className="line-clamp-2 text-base">{announcement.title}</CardTitle>
        <Badge variant={STATUS_VARIANT[announcement.status]} className="shrink-0">
          {STATUS_LABEL[announcement.status]}
        </Badge>
      </CardHeader>
      <CardContent className="space-y-2">
        <p className="line-clamp-3 text-sm text-muted-foreground whitespace-pre-wrap">
          {announcement.content}
        </p>
        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
          <Badge variant="outline" className="capitalize">
            {TYPE_LABEL[announcement.type]}
          </Badge>
          <span>
            {announcement.publishedAt
              ? `Published ${formatDate(announcement.publishedAt)}`
              : `Updated ${formatDate(announcement.updatedAt)}`}
          </span>
          {announcement.authorName ? (
            <span className="ml-auto">by {announcement.authorName}</span>
          ) : null}
        </div>
      </CardContent>
    </Card>
  )

  if (href) {
    return (
      <Link href={href} className="block h-full">
        {card}
      </Link>
    )
  }

  return card
}