import { Tabs } from '@chakra-ui/react';
import { Link } from '@tanstack/react-router';

export function BookOverviewTabs({
  bookId,
  currentTab
}: {
  readonly bookId: string;
  readonly currentTab: 'contents' | 'reviews';
}) {
  return (
    <Tabs.Root defaultValue="members" value={currentTab}>
      <Tabs.List>
        <Link to={`/work/book/${bookId}/overview/contents`}>
          <Tabs.Trigger value="contents">Contents</Tabs.Trigger>
        </Link>
        <Link to={`/work/book/${bookId}/overview/reviews`}>
          <Tabs.Trigger value="reviews">Reviews</Tabs.Trigger>
        </Link>
      </Tabs.List>
    </Tabs.Root>
  );
}