"use client";

import Link from "next/link";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

export function ForkedByPopover({
  label,
  forks,
}: {
  label: string;
  forks: { id: string; title: string }[];
}) {
  return (
    <Popover>
      <PopoverTrigger className="text-sm text-muted-foreground hover:text-foreground underline-offset-2 hover:underline text-left">
        {label}
      </PopoverTrigger>
      <PopoverContent className="w-64 p-2" align="start">
        <ul className="space-y-0.5">
          {forks.map((f) => (
            <li key={f.id}>
              <Link
                href={`/recipes/${f.id}`}
                className="block rounded px-2 py-1.5 text-sm hover:bg-accent truncate"
              >
                {f.title}
              </Link>
            </li>
          ))}
        </ul>
      </PopoverContent>
    </Popover>
  );
}