"use client";

import { Card, CardContent } from "@/shared/components/ui/card";
import { News } from "@/shared/types/news";
import { ArrowRight } from "lucide-react";
import Link from "next/link";
import DOMPurify from "dompurify";

function truncateHtml(html: string, maxLength: number): string {
  const tempEl = document.createElement("div");
  tempEl.innerHTML = html;
  const textContent = tempEl.textContent || "";
  return textContent.length > maxLength
    ? textContent.slice(0, maxLength) + "..."
    : textContent;
}

type Props = { news: News };
export function NewsSecondaryCard({ news }: Props) {
  const safeHtml = DOMPurify.sanitize(truncateHtml(news.description, 300));

  return (
    <>
      <Card className="font-onest h-full w-full overflow-hidden p-0">
        <CardContent className="flex h-full flex-col p-0">
          <div className="flex flex-1 flex-col space-y-3 p-5">
            {/* <div className="mb-8 flex items-center justify-between">
              <span className="bg-biru-150 text-biru-500 rounded-full px-4 py-1 text-xs font-medium">
                Pengumuman
              </span>
              <div className="text-dark-300 flex items-center text-sm">
                <Calendar size={14} />
                <p className="ms-1 mb-0">12 Oktober 2025</p>
              </div>
            </div> */}
            <h3 className="md:text-md mb-2 line-clamp-4 text-base font-medium sm:text-lg lg:line-clamp-2 lg:text-lg xl:line-clamp-3 xl:text-lg">
              {news.name}
            </h3>
            <p
              className="text-dark-300 mb-8 text-sm"
              dangerouslySetInnerHTML={{ __html: safeHtml }}
            ></p>

            <Link
              href={`/news/${news.id}`}
              className="text-primary hover:text-biru-300 flex items-center text-sm"
            >
              Baca selengkapnya <ArrowRight size={14} className="ml-1" />
            </Link>
          </div>
        </CardContent>
      </Card>
    </>
  );
}