import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { getAllRehberler } from "../rehber-queries";
import { RehberKapak } from "./rehber-kapak";
import { Skeleton } from "@/components/ui/skeleton";

export function RehberListesi() {
  const yazilar = getAllRehberler();

  return (
    <ul className="mt-8 columns-1 gap-5 sm:columns-2 lg:columns-3">
      {yazilar.map((y) => (
        <li key={y.slug} className="mb-5 break-inside-avoid">
          <Link
            href={`/rehber/${y.slug}`}
            className="block overflow-hidden rounded-3xl border border-slate-200 bg-white p-2 shadow-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-primary"
          >
            <RehberKapak
              baslik={y.baslik}
              compact
              className="rounded-[1.15rem]"
            />
            <div className="px-3 pb-3 pt-4">
              <p className="text-sm leading-6 text-slate-600">{y.aciklama}</p>
              <span className="mt-4 inline-flex items-center gap-1.5 font-bricolage text-sm font-semibold text-primary">
                Yazıyı oku
                <ArrowRight className="size-4" aria-hidden />
              </span>
            </div>
          </Link>
        </li>
      ))}
    </ul>
  );
}

export function RehberListesiSkeleton() {
  return (
    <ul className="mt-8 columns-1 gap-5 sm:columns-2 lg:columns-3">
      {Array.from({ length: 3 }, (_, i) => (
        <li key={i} className="mb-5 break-inside-avoid">
          <div className="rounded-3xl border border-slate-200 bg-white p-2 shadow-sm">
            <Skeleton className="aspect-[1200/630] w-full rounded-[1.15rem]" />
            <div className="px-3 pb-3 pt-4">
              <Skeleton className="h-5 w-full" />
              <Skeleton className="mt-2 h-5 w-2/3" />
            </div>
          </div>
        </li>
      ))}
    </ul>
  );
}
