'use client';

import { useTranslations } from 'next-intl';

interface EditModeToggleProps {
  isEditMode: boolean;
  onToggle: () => void;
}

/**
 * Pencil / Checkmark icon button to toggle dashboard edit mode (D-01).
 * Active state (edit mode) uses primary background.
 * Sitzt seit quick-260928-vxe rechts in der dunklen App-Leiste: in der
 * Ansicht nur der Stift (Name per aria-label/Tooltip), im Bearbeitungsmodus
 * der gelbe Knopf „Fertig“.
 */
export function EditModeToggle({ isEditMode, onToggle }: EditModeToggleProps) {
  const t = useTranslations('widgets');

  return (
    <button
      type="button"
      onClick={onToggle}
      className={`btn ${isEditMode ? 'btn-primary' : 'btn-appbar btn-icon'}`}
      aria-pressed={isEditMode}
      aria-label={isEditMode ? undefined : t('editShort')}
      title={isEditMode ? t('saveChanges') : t('editMode')}
    >
      {isEditMode ? (
        // Checkmark icon
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <polyline points="20 6 9 17 4 12" />
        </svg>
      ) : null}
      {isEditMode ? null : (
        // Pencil icon
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
        </svg>
      )}
      {isEditMode ? t('done') : null}
    </button>
  );
}