import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import IbanInput from "@/components/IbanInput";
import AdresseInput from "@/components/AdresseInput";



const MitgliedWerdenPage = () => {
  return (
    <div className="flex justify-center mt-10">
      <Card className="w-full max-w-2xl">
        <CardContent className="p-6">
          <h1 className="text-2xl font-bold mb-4 text-center">Mitglied werden</h1>
          <form className="space-y-4">
            {/* Mitgliedsdaten */}
            <h2 className="text-lg font-semibold">Persönliche Daten</h2>
            <Input placeholder="Vorname" required />
            <Input placeholder="Nachname" required />
            {/*<AdresseInput /> -> Für die spätere Verwendung zum AutoComplete*/}
            <Input placeholder="Straße und Hausnummer" required />
            <Input placeholder="PLZ und Wohnort" required />
            <Input placeholder="Telefonnummer" required />
            <Input placeholder="E-Mail-Adresse" type="email" required />
            <div className="flex flex-col space-y-1">
            <label htmlFor="birthdate" className="text-sm font-medium text-gray-700">
              Geburtsdatum*
            </label>
            <Input id="birthdate" type="date" required />
          </div>

          <div className="flex flex-col space-y-1">
            <label htmlFor="entrydate" className="text-sm font-medium text-gray-700">
              Eintrittsdatum*
            </label>
            <Input id="entrydate" type="date" required />
          </div>

            {/* Bankverbindung */}
            <h2 className="text-lg font-semibold mt-6">Bankverbindung</h2>
            <Input placeholder="Kontoinhaber (Name, Vorname)" required />
            <Input placeholder="Straße und Hausnummer (falls abweichend)" />
            <Input placeholder="PLZ und Wohnort (falls abweichend)" />
            <IbanInput />
            <Input placeholder="BIC" required />

            {/* Submit Button */}
            <Button type="submit" className="w-full bg-frog-500 hover:bg-frog-600 text-white mt-6">
              Absenden
            </Button>
          </form>
        </CardContent>
      </Card>
    </div>
  );
};

export default MitgliedWerdenPage;