"use client";
import Image from "next/image";
import { useQuery } from "@tanstack/react-query";
import { q } from "@/lib/queries";
export function Thumb({ id }: { id: string }) {
  const { data, isLoading, error, refetch } = useQuery({
    queryKey: ["thumb", id],
    queryFn: () => q.thumb(id),
  });
  if (isLoading)
    return (
      <div className="aspect-video animate-pulse rounded-xl bg-zinc-800" />
    );
  if (error || !data?.url)
    return (
      <button
        onClick={() => refetch()}
        className="aspect-video w-full rounded-xl bg-zinc-900 text-sm text-zinc-400"
      >
        Retry thumbnail
      </button>
    );
  return (
    <Image
      src={data.url}
      alt="Clip thumbnail"
      width={640}
      height={360}
      className="aspect-video w-full rounded-xl object-cover"
    />
  );
}