import Link from "next/link";

type Props = {
  resourceSlug: string;
  previousChapterSlug?: string;
  nextChapterSlug?: string;
};

export function StickyActionBar({resourceSlug, previousChapterSlug, nextChapterSlug}: Props) {
  return (
    <div className="sticky bottom-3 z-20 mt-6 flex flex-wrap gap-2 rounded-xl border border-border bg-card/95 p-3 shadow-sm backdrop-blur">
      <Link
        href="/"
        className="inline-flex h-7 items-center rounded-md border border-border bg-background px-2.5 text-[0.8rem] font-medium transition hover:bg-muted"
      >
        All resources
      </Link>
      {previousChapterSlug ? (
        <Link
          href={`/resources/${resourceSlug}?chapter=${previousChapterSlug}`}
          className="inline-flex h-7 items-center rounded-md bg-secondary px-2.5 text-[0.8rem] font-medium text-secondary-foreground transition hover:opacity-90"
        >
          Previous chapter
        </Link>
      ) : null}
      {nextChapterSlug ? (
        <Link
          href={`/resources/${resourceSlug}?chapter=${nextChapterSlug}`}
          className="inline-flex h-7 items-center rounded-md bg-primary px-2.5 text-[0.8rem] font-medium text-primary-foreground transition hover:opacity-90"
        >
          Next chapter
        </Link>
      ) : null}
    </div>
  );
}