// @design-system: domain/ViewToggle

'use client';

import { LayoutGrid, Map } from 'lucide-react';
import { useT } from '@/lib/i18n/react';
import { SegmentedControl } from '@/components/ui/primitives/SegmentedControl';
import { cn } from '@/lib/cn';

export type ViewMode = 'gallery' | 'map';

export interface ViewToggleProps {
  /** Currently active view mode. */
  value: ViewMode;
  /** Called when user switches view. */
  onChange: (v: ViewMode) => void;
  /** Additional class names. */
  className?: string;
}

/**
 * ViewToggle — gallery / map segmented control.
 *
 * Wraps SegmentedControl with icon+label options. Icons are aria-hidden;
 * the SegmentedControl's aria-label plus the visible text provide accessible naming.
 *
 * @example
 * ```tsx
 * <ViewToggle value={viewMode} onChange={setViewMode} />
 * ```
 */
export function ViewToggle({ value, onChange, className }: ViewToggleProps) {
  const t = useT('near_you');

  const options = [
    {
      value: 'gallery' as const,
      label: (
        <span className="inline-flex items-center gap-1.5">
          <LayoutGrid size={14} aria-hidden />
          <span>{t('gallery')}</span>
        </span>
      ) as unknown as string,
    },
    {
      value: 'map' as const,
      label: (
        <span className="inline-flex items-center gap-1.5">
          <Map size={14} aria-hidden />
          <span>{t('map')}</span>
        </span>
      ) as unknown as string,
    },
  ];

  return (
    <SegmentedControl
      aria-label={`${t('gallery')} / ${t('map')}`}
      value={value}
      onChange={(v) => onChange(v as ViewMode)}
      options={options}
      size="sm"
      className={cn(className)}
    />
  );
}