type WebringProps = {
  name: string;
  label?: string;
  slug: string;
  from: string;
  aboutHref?: string;
};

export function Webring({
  name,
  label = `${name} webring`,
  slug,
  from,
  aboutHref = "https://github.com/4shub/ringdt",
}: WebringProps) {
  const baseUrl = `https://ringdt.rapid.workers.dev/${slug}`;
  const fromParam = encodeURIComponent(from);

  return (
    <div class="webring" aria-label={`${name} webring navigation`}>
      <a href={`${baseUrl}/prev?from=${fromParam}`}>previous</a>
      <a href={aboutHref} target="_blank" rel="noopener">
        {label}
      </a>
      <a href={`${baseUrl}/next?from=${fromParam}`}>next</a>
    </div>
  );
}