import React from "react";
import { useCheckout } from "@stripe/react-stripe-js";
import { Input } from "@/components/ui/input"; // Shadcn Input-Komponente importieren
import { Label } from "@/components/ui/label"; // Shadcn Label-Komponente importieren

export const EmailInput = () => {
  const checkout = useCheckout();
  const [email, setEmail] = React.useState("");
  const [error, setError] = React.useState<{ message: string } | null>(null);

  const handleBlur = () => {
    checkout.updateEmail(email).then((result) => {
      if (result.type === "error") {
        setError({ message: result.error.message });
      }
    });
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setError(null);
    setEmail(e.target.value);
  };

  return (
    <div className="flex flex-col space-y-2 w-full">
      <Label htmlFor="email" className="text-sm font-medium">
        E-Mail-Adresse
      </Label>
      <Input
        id="email"
        type="email"
        value={email}
        onChange={handleChange}
        onBlur={handleBlur}
        className="w-full h-11"
      />
      {error && <div className="text-red-500 text-sm">{error.message}</div>}
    </div>
  );
};