import React, { useState, ChangeEvent } from 'react';
import { Subscription } from '../types';

interface SubscriptionFormProps {
  onSubmit: (subscription: Omit<Subscription, 'id' | 'active' | 'userId'>) => Promise<void>;
}

const SubscriptionForm: React.FC<SubscriptionFormProps> = ({ onSubmit }) => {
  const [subscriptionType, setSubscriptionType] = useState<string>('Basic');

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await onSubmit({ type: subscriptionType, price: subscriptionType === 'Basic' ? 5 : 15 });
  };

  const handleChange = (e: ChangeEvent<HTMLSelectElement>) => {
    setSubscriptionType(e.target.value);
  };

  return (
    <div className="card bg-dark border-punk m-2">
      <div className="card-body">
        <h5 className="text-punk">Оформить подписку</h5>
        <form onSubmit={handleSubmit}>
          <select
            className="form-select bg-dark text-light border-punk mb-3"
            value={subscriptionType}
            onChange={handleChange}
          >
            <option value="Basic">Базовая ($5)</option>
            <option value="Premium">Премиум ($15)</option>
          </select>
          <button type="submit" className="btn btn-punk">Подписаться</button>
        </form>
      </div>
    </div>
  );
};

export default SubscriptionForm;