'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.
 */
export function EditModeToggle({ isEditMode, onToggle }: EditModeToggleProps) {
  const t = useTranslations('widgets');

  return (
    <button
      onClick={onToggle}
      className={`inline-flex items-center justify-center rounded-md p-2 transition-colors ${
        isEditMode
          ? 'bg-primary text-primary-foreground hover:opacity-90'
          : 'text-muted-foreground hover:bg-muted hover:text-foreground'
      }`}
      aria-pressed={isEditMode}
      aria-label={isEditMode ? t('saveChanges') : t('editMode')}
      title={isEditMode ? t('saveChanges') : t('editMode')}
    >
      {isEditMode ? (
        // Checkmark icon
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
        >
          <polyline points="20 6 9 17 4 12" />
        </svg>
      ) : (
        // Pencil icon
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="20"
          height="20"
          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>
      )}
    </button>
  );
}