export function CheckoutForm({ onSubmit }) {
  const [phone, setPhone] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!phone.startsWith('05') || phone.length !== 10) {
      setError('يرجى إدخال رقم هاتف سعودي صحيح يبدأ بـ 05 ويتكون من 10 أرقام');
      return;
    }
    setError('');
    onSubmit({ phone });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-xs font-bold mb-1">رقم الجوال للتوصيل</label>
        <input
          type="tel"
          value={phone}
          onChange={(e) => setPhone(e.target.value)}
          placeholder="05XXXXXXXX"
          className="w-full p-2.5 rounded-xl border border-slate-300 text-sm"
        />
        {error && <p className="text-xs text-red-500 mt-1">{error}</p>}
      </div>
      <button type="submit" className="w-full py-3 bg-emerald-600 text-white rounded-xl font-bold">
        تأكيد الطلب الآن
      </button>
    </form>
  );
}