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

type Props = { news: News };
export function NewsMainCard({ news }: Props) {
  return (
    <>
      <Card className="font-onest h-full w-full overflow-hidden p-0">
        <CardContent className="flex h-full flex-col p-0">
          <div className="relative aspect-[21/9] w-full">
            <Image
              src={news.thumbnail ?? "/landing/placeholder.webp"}
              alt="thumbnail"
              fill
              className="rounded-t-md object-cover"
            />
          </div>

          <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">
                {news.}
              </span>
              <div className="text-dark-300 flex items-center text-sm">
                <Calendar size={14} />
                <p className="ms-1 mb-0">{dateLabel}</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">{news.description}</p>

            <div className="mt-auto">
              <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>
              {/* <a
              href={`/maps?mapset-id=${mapset.id}`}
              className="text-primary inline-flex items-center hover:underline"
              rel="noopener noreferrer"
            >
              <div className="flex w-full items-center justify-between gap-4 text-zinc-500">
                <div className="flex items-center gap-1">
                  <Eye className="h-4 w-4" />
                  <span>2.450</span>
                </div>
                <div className="flex items-center gap-1">
                  <Download className="h-4 w-4" />
                  <span>892</span>
                </div>
              </div>
            </a> */}
            </div>
          </div>
        </CardContent>
      </Card>
      {/* <div className="font-onest relative h-full overflow-hidden rounded-2xl lg:col-span-2 lg:row-span-2">
        <Image
          src={"/landing/hero.webp"}
          alt="thumbnail"
          fill
          className="rounded-t-md object-cover"
        />
        <div className="flex flex-col p-0">
          <div className="flex items-center justify-between">
            <span className="bg-biru-150 text-biru-500 rounded-full">
              Pengumuman
            </span>
          </div>
        </div>
      </div> */}
    </>
  );
}