import { Modal, Input, Button } from './ui';
import { DECK_INPUT_FIELD_CLASS } from '../lib/deck-format-utils.js';

export default function DecksCreateModal({
  isOpen,
  onClose,
  newDeck,
  setNewDeck,
  onCreate,
}) {
  return (
    <Modal open={isOpen} onClose={onClose} title="Create New Deck" size="md">
      <form onSubmit={onCreate} className="space-y-4">
        <Input
          label="Deck Name *"
          required
          value={newDeck.name}
          onChange={(e) => setNewDeck({ ...newDeck, name: e.target.value })}
          placeholder="Enter deck name"
        />
        <div>
          <label
            className="block text-sm font-medium mb-2"
            style={{ color: 'var(--text-primary)' }}
            htmlFor="create-deck-format"
          >
            Format
          </label>
          <select
            id="create-deck-format"
            value={newDeck.format}
            onChange={(e) => setNewDeck({ ...newDeck, format: e.target.value })}
            className={DECK_INPUT_FIELD_CLASS}
          >
            <option value="Commander">Commander</option>
            <option value="Standard">Standard</option>
            <option value="Modern">Modern</option>
            <option value="Legacy">Legacy</option>
          </select>
        </div>
        <div>
          <label
            className="block text-sm font-medium mb-2"
            style={{ color: 'var(--text-primary)' }}
            htmlFor="create-deck-description"
          >
            Description
          </label>
          <textarea
            id="create-deck-description"
            value={newDeck.description}
            onChange={(e) => setNewDeck({ ...newDeck, description: e.target.value })}
            className={DECK_INPUT_FIELD_CLASS}
            rows="3"
            placeholder="Describe your deck strategy..."
          />
        </div>
        <label className="flex items-center">
          <input
            type="checkbox"
            checked={newDeck.is_public}
            onChange={(e) => setNewDeck({ ...newDeck, is_public: e.target.checked })}
            className="mr-2"
            style={{ accentColor: 'var(--accent-ember)' }}
          />
          <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>
            Make deck public
          </span>
        </label>
        <div className="flex space-x-3 pt-2">
          <Button type="button" variant="secondary" onClick={onClose} className="flex-1">
            Cancel
          </Button>
          <Button type="submit" variant="primary" className="flex-1">
            Create Deck
          </Button>
        </div>
      </form>
    </Modal>
  );
}