import { Modal, Input, Button } from './ui';

export default function CollectionEditModal({
  isOpen,
  editForm,
  setEditForm,
  onClose,
  onSave,
}) {
  return (
    <Modal open={isOpen} onClose={onClose} title="Edit list" size="md">
      <div className="space-y-4">
        <Input
          label="List Name"
          value={editForm.name}
          onChange={(e) => setEditForm({ ...editForm, name: e.target.value })}
          placeholder="Enter list name"
        />
        <div>
          <label
            className="block text-sm font-medium mb-2"
            style={{ color: 'var(--text-primary)' }}
            htmlFor="collection-edit-description"
          >
            Description
          </label>
          <textarea
            id="collection-edit-description"
            className="input-field w-full"
            rows="3"
            value={editForm.description}
            onChange={(e) => setEditForm({ ...editForm, description: e.target.value })}
            placeholder="Describe your list"
          />
        </div>
        <Input
          label="Hero Image (Optional)"
          type="url"
          value={editForm.image}
          onChange={(e) => setEditForm({ ...editForm, image: e.target.value })}
          placeholder="Enter image URL"
        />
        <div
          className="flex items-center justify-between p-4 rounded-lg border"
          style={{ borderColor: 'var(--border)' }}
        >
          <div>
            <label className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>
              Public List
            </label>
            <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
              Make this collection discoverable by other users
            </p>
          </div>
          <button
            type="button"
            onClick={() => setEditForm({ ...editForm, isPublic: !editForm.isPublic })}
            aria-pressed={editForm.isPublic}
            aria-label="Toggle public list"
            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
              editForm.isPublic ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
            }`}
          >
            <span
              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
                editForm.isPublic ? 'translate-x-6' : 'translate-x-1'
              }`}
            />
          </button>
        </div>
      </div>
      <div className="flex space-x-3 mt-6">
        <Button variant="secondary" onClick={onClose} className="flex-1">
          Cancel
        </Button>
        <Button
          variant="primary"
          onClick={onSave}
          disabled={!editForm.name.trim()}
          className="flex-1"
        >
          Save Changes
        </Button>
      </div>
    </Modal>
  );
}