import React, { useState, useEffect } from 'react';
import type { SearchParams } from '../types';
interface SearchFormProps {
onSubmit: (params: SearchParams) => void;
isLoading: boolean;
}
export const SearchForm: [Link]<SearchFormProps> = ({ onSubmit, isLoading }) => {
const [examId, setExamId] = useState<string>('');
const [startQ, setStartQ] = useState<string>('');
const [endQ, setEndQ] = useState<string>('');
useEffect(() => {
setExamId([Link]('examId') || 'Cisco 200-301');
setStartQ([Link]('startQ') || '1');
setEndQ([Link]('endQ') || '3');
}, []);
const handleSubmit = (e: [Link]<HTMLFormElement>) => {
[Link]();
[Link]('examId', examId);
[Link]('startQ', startQ);
[Link]('endQ', endQ);
onSubmit({ examId, startQ, endQ });
};
return (
<div className="bg-slate-800/50 p-6 rounded-xl border border-slate-700 shadow-
lg mb-8">
<form onSubmit={handleSubmit} className="grid grid-cols-1 md:grid-cols-4 gap-
4 items-end">
<div className="col-span-1 md:col-span-2">
<label htmlFor="examId" className="block text-sm font-medium text-slate-
300 mb-1">Exam ID</label>
<input
type="text"
id="examId"
value={examId}
onChange={(e) => setExamId([Link])}
className="w-full bg-slate-900/80 border border-slate-600 rounded-md
shadow-sm px-3 py-2 text-slate-200 focus:outline-none focus:ring-2 focus:ring-cyan-
500"
placeholder="e.g., Cisco 200-301"
required
/>
</div>
<div>
<label htmlFor="startQ" className="block text-sm font-medium text-slate-
300 mb-1">Start Q#</label>
<input
type="number"
id="startQ"
value={startQ}
onChange={(e) => setStartQ([Link])}
className="w-full bg-slate-900/80 border border-slate-600 rounded-md
shadow-sm px-3 py-2 text-slate-200 focus:outline-none focus:ring-2 focus:ring-cyan-
500"
placeholder="1"
min="1"
required
/>
</div>
<div>
<label htmlFor="endQ" className="block text-sm font-medium text-slate-300
mb-1">End Q#</label>
<input
type="number"
id="endQ"
value={endQ}
onChange={(e) => setEndQ([Link])}
className="w-full bg-slate-900/80 border border-slate-600 rounded-md
shadow-sm px-3 py-2 text-slate-200 focus:outline-none focus:ring-2 focus:ring-cyan-
500"
placeholder="10"
min="1"
required
/>
</div>
<button
type="submit"
disabled={isLoading}
className="md:col-start-4 w-full bg-cyan-600 hover:bg-cyan-500
disabled:bg-slate-600 disabled:cursor-not-allowed text-white font-bold py-2 px-4
rounded-md transition-all duration-200 ease-in-out focus:outline-none focus:ring-2
focus:ring-offset-2 focus:ring-offset-slate-900 focus:ring-cyan-500 shadow-md"
>
{isLoading ? 'Fetching...' : 'Fetch Questions'}
</button>
</form>
</div>
);
};