'use client';

/**
 * DeviceToggle — segmented control to switch between mobile/desktop canvas.
 *
 * Uses the existing <Button> primitive for both options.
 * Each button carries aria-pressed to indicate the active device.
 * All styling is token-only.
 */

import { useT } from '@/lib/i18n/react';
import { Button } from '@/components/ui/primitives/Button';
import { useOrganizer } from './state';

export function DeviceToggle() {
  const t = useT('page_organizer');
  const device = useOrganizer((s) => s.device);
  const setDevice = useOrganizer((s) => s.setDevice);

  return (
    <div
      role="group"
      aria-label={t('device_mobile') + ' / ' + t('device_desktop')}
      className="bg-surface-base border-border-default inline-flex gap-0.5 rounded-md border p-0.5"
    >
      <Button
        variant={device === 'mobile' ? 'primary' : 'ghost'}
        size="sm"
        aria-pressed={device === 'mobile'}
        onClick={() => setDevice('mobile')}
      >
        {t('device_mobile')}
      </Button>
      <Button
        variant={device === 'desktop' ? 'primary' : 'ghost'}
        size="sm"
        aria-pressed={device === 'desktop'}
        onClick={() => setDevice('desktop')}
      >
        {t('device_desktop')}
      </Button>
    </div>
  );
}