'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import styles from '../branches/branches.module.css'; // Reuse styles

export function AddInstructorForm() {
    const [name, setName] = useState('');
    const [bio, setBio] = useState('');
    const router = useRouter();

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        await fetch('/api/instructors', {
            method: 'POST',
            body: JSON.stringify({ name, bio }),
        });
        setName('');
        setBio('');
        router.refresh();
    };

    return (
        <form onSubmit={handleSubmit} className={styles.form}>
            <div className={styles.inputGroup}>
                <label>Hoca Adı</label>
                <input value={name} onChange={e => setName(e.target.value)} className={styles.input} required />
            </div>
            <div className={styles.inputGroup}>
                <label>Biyografi / Uzmanlık</label>
                <input value={bio} onChange={e => setBio(e.target.value)} className={styles.input} />
            </div>
            <button type="submit" className={styles.btn}>Ekle</button>
        </form>
    );
}