'use client';

import {IconButton} from '@astryxdesign/core/IconButton';
import {Icon} from '@astryxdesign/core/Icon';
import {ICONS} from '@/lib/icons';
import {useBreakpoint, isPanelInline} from '@/lib/breakpoints';
import {useCopilot} from './CopilotProvider';

/**
 * One control, two behaviours: above the laptop breakpoint it collapses the
 * inline panel to give the workspace full width; below it, it opens the
 * slide-over. Both read and write the same provider, so the Copilot's contents
 * never notice which one is in play.
 */
export function CopilotToggle() {
  const bp = useBreakpoint();
  const {isOpen, toggle, isSlideOverOpen, setSlideOverOpen} = useCopilot();
  const inline = isPanelInline(bp);

  const isShown = inline ? isOpen : isSlideOverOpen;

  return (
    <IconButton
      icon={<Icon icon={isShown ? ICONS.panelClose : ICONS.panelOpen} />}
      label={isShown ? 'Hide Loyaly AI' : 'Show Loyaly AI'}
      variant="ghost"
      onClick={() => (inline ? toggle() : setSlideOverOpen(!isSlideOverOpen))}
    />
  );
}
