import React from 'react';
import { Icon, Icons } from 'folds';
import { useAtom } from 'jotai';
import { SidebarAvatar, SidebarItem, SidebarItemTooltip } from '../../../components/sidebar';
import { bookmarksPanelAtom } from '../../../state/bookmarksPanel';

export function BookmarksTab() {
  const [opened, setOpen] = useAtom(bookmarksPanelAtom);

  const toggle = () => setOpen((v) => !v);

  return (
    <SidebarItem active={opened}>
      <SidebarItemTooltip tooltip="Saved Messages">
        {(triggerRef) => (
          <SidebarAvatar
            as="button"
            ref={triggerRef}
            aria-label="Saved Messages"
            outlined
            onClick={toggle}
          >
            <Icon src={Icons.Star} filled={opened} />
          </SidebarAvatar>
        )}
      </SidebarItemTooltip>
    </SidebarItem>
  );
}