import React, { useState } from 'react';
import { Input } from '../components/ui/Input';
import { Button } from '../components/ui/Button';

export const PublicTracker: React.FC = () => {
    const [trackingId, setTrackingId] = useState('');

    const handleTrack = (e: React.FormEvent) => {
        e.preventDefault();
        // TODO: Implement tracking logic
    };

    return (
        <div className="min-h-screen bg-slate-50 flex flex-col items-center pt-20 px-4">
            <div className="w-full max-w-lg text-center space-y-8">
                <h1 className="text-4xl font-bold text-slate-900">Track Application</h1>
                <p className="text-slate-600">Enter your application ID to check the status.</p>

                <form onSubmit={handleTrack} className="bg-white p-8 rounded-lg shadow-md border border-slate-200 space-y-6">
                    <Input
                        label="Application ID"
                        placeholder="e.g. APP-12345678"
                        value={trackingId}
                        onChange={(e) => setTrackingId(e.target.value)}
                        required
                    />
                    <Button type="submit" className="w-full" size="lg">
                        Track Status
                    </Button>
                </form>
            </div>
        </div>
    );
};
