// src/components/admin/menus/MenuSettings.tsx

'use client';

interface MenuSettingsProps {
  location: string;
  setLocation: (value: string) => void;
  isActive: boolean;
  setIsActive: (value: boolean) => void;
  isEditing: boolean;
}

export function MenuSettings({
  location,
  setLocation,
  isActive,
  setIsActive,
}: MenuSettingsProps) {
  return (
    <div
      className="p-4 rounded-lg grid grid-cols-1 md:grid-cols-2 gap-4"
      style={{
        background: 'var(--color-surface)',
        border: '1px solid var(--color-border)',
      }}
    >
      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Menu Location <span className="text-red-500">*</span>
        </label>
        <input
          type="text"
          value={location}
          onChange={(e) => setLocation(e.target.value)}
          placeholder="e.g., header, footer, sidebar"
          className="w-full px-4 py-2.5 rounded-lg text-sm outline-none transition-all focus:ring-2 focus:ring-cta/20"
          style={{
            background: 'var(--color-surface-alt)',
            border: '1px solid var(--color-border)',
            color: 'var(--color-text)',
          }}
        />
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Unique identifier for this menu location (e.g., header, footer, sidebar)
        </p>
      </div>

      <div>
        <label className="block text-sm font-medium mb-1.5" style={{ color: 'var(--color-text-secondary)' }}>
          Menu Status
        </label>
        <button
          type="button"
          onClick={() => setIsActive(!isActive)}
          className="px-4 py-2 rounded-lg text-sm font-medium transition-all"
          style={{
            background: isActive ? 'var(--color-success)' : 'var(--color-surface-alt)',
            border: isActive ? 'none' : '1px solid var(--color-border)',
            color: isActive ? 'white' : 'var(--color-text-secondary)',
          }}
        >
          {isActive ? '✅ Active' : '❌ Inactive'}
        </button>
        <p className="text-xs mt-1" style={{ color: 'var(--color-text-tertiary)' }}>
          Inactive menus won`t be displayed on the frontend
        </p>
      </div>
    </div>
  );
}