"use client"

import Link from "next/link"
import { useTranslations } from "next-intl"

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"

export function AnnouncementCard({
  announcement,
  href,
}: {
  announcement: Announcement
  href?: string
}) {
  const t = useTranslations("announcements")

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

  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={statusVariant[announcement.status]} className="shrink-0">
          {t(`status.${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">
            {t(`type.${announcement.type}`)}
          </Badge>
          <span>
            {announcement.publishedAt
              ? t("meta.publishedAt", { date: formatDate(announcement.publishedAt) })
              : t("meta.updatedAt", { date: formatDate(announcement.updatedAt) })}
          </span>
          {announcement.authorName ? (
            <span className="ml-auto">{t("meta.author", { name: announcement.authorName })}</span>
          ) : null}
        </div>
      </CardContent>
    </Card>
  )

  if (href) {
    return (
      <Link href={href} className="block h-full" aria-label={announcement.title}>
        {card}
      </Link>
    )
  }

  return card
}