import React from 'react';
import './PresentationDetailsForm.css';

interface PresentationDetailsFormProps {
  title: string;
  description: string;
  onTitleChange: (title: string) => void;
  onDescriptionChange: (description: string) => void;
}

export const PresentationDetailsForm: React.FC<PresentationDetailsFormProps> = ({
  title,
  description,
  onTitleChange,
  onDescriptionChange
}) => {
  return (
    <section className="presentation-details">
      <h2>Presentation Details</h2>
      <div className="form-group">
        <label htmlFor="title">Title *</label>
        <input
          id="title"
          type="text"
          value={title}
          onChange={(e) => onTitleChange(e.target.value)}
          placeholder="Enter presentation title"
          className="form-input"
          required
        />
      </div>
      
      <div className="form-group">
        <label htmlFor="description">Description</label>
        <textarea
          id="description"
          value={description}
          onChange={(e) => onDescriptionChange(e.target.value)}
          placeholder="Optional description of your presentation"
          className="form-textarea"
          rows={3}
        />
      </div>
    </section>
  );
};