'use client';

/**
 * VisibilityToggles — two Switch rows controlling guests + logged-in visibility
 * for a module instance in the ConfigDrawer.
 *
 * Uses the shared <Switch> primitive. All strings via useT('page_organizer').
 * Token-only styling. RTL logical properties.
 */

import { Switch } from '@/components/ui/primitives/Switch';
import { useT } from '@/lib/i18n/react';
import type { ModuleVisibility } from '@/server/page-layout/types';
import { LabelWithTooltip } from '@/components/ui/primitives/LabelWithTooltip';

export interface VisibilityTogglesProps {
  /** Current visibility config for this module instance. */
  visibility: ModuleVisibility;
  /** Called with the updated visibility when a toggle changes. */
  onChange: (v: ModuleVisibility) => void;
}

export function VisibilityToggles({ visibility, onChange }: VisibilityTogglesProps) {
  const t = useT('page_organizer');

  return (
    <div className="flex flex-col gap-3">
      {/* Guests toggle */}
      <div className="flex items-center justify-between gap-3">
        <LabelWithTooltip label={t('visibility_guests')} tooltip={t('help_visibility_guests')} />
        <Switch
          checked={visibility.guests}
          onCheckedChange={(checked) => onChange({ ...visibility, guests: checked })}
          aria-label={t('visibility_guests')}
        />
      </div>

      {/* Logged-in users toggle */}
      <div className="flex items-center justify-between gap-3">
        <LabelWithTooltip
          label={t('visibility_logged_in')}
          tooltip={t('help_visibility_logged_in')}
        />
        <Switch
          checked={visibility.loggedIn}
          onCheckedChange={(checked) => onChange({ ...visibility, loggedIn: checked })}
          aria-label={t('visibility_logged_in')}
        />
      </div>
    </div>
  );
}