'use client';

import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
import {Icon} from '@astryxdesign/core/Icon';
import {ICONS} from '@/shared/utils/icons';
import {useWorkspace} from '@/shared/providers/WorkspaceProvider';

/**
 * Store scope for the page that renders it. The selection lives in
 * WorkspaceProvider, so switching re-queries every panel on the page without a
 * route change — which is what keeps Loyaly AI mounted — and the choice
 * carries to the next page that also scopes by store.
 *
 * `secondary` rather than `ghost`: in a page header these are the row, not
 * decoration on a bar, and they need a visible edge to read as controls.
 */
export function StoreSwitcher() {
  const {storeId, setStoreId, stores} = useWorkspace();
  const current = stores.find((s) => s.id === storeId);

  return (
    <DropdownMenu
      button={{
        variant: 'secondary',
        size: 'sm',
        label: current ? current.name : 'All stores',
        icon: <Icon icon={ICONS.stores} size="sm" />,
      }}
      items={[
        {label: 'All stores', onClick: () => setStoreId('all')},
        {type: 'divider'},
        {
          type: 'section',
          title: 'Stores',
          items: stores.map((s) => ({
            label: s.name,
            onClick: () => setStoreId(s.id),
          })),
        },
      ]}
    />
  );
}
