"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Alert, AlertDescription } from "@/components/ui/alert";
import type { usePasswordChange } from "@/hooks/usePasswordChange";

type PasswordSectionProps = ReturnType<typeof usePasswordChange>;

export function PasswordSection({
  currentPw,
  setCurrentPw,
  newPw,
  setNewPw,
  confirmPw,
  setConfirmPw,
  pwError,
  pwSuccess,
  pwLoading,
  handleChangePassword,
}: PasswordSectionProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Passwort aendern</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleChangePassword} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="current-password">Aktuelles Passwort</Label>
            <Input
              id="current-password"
              type="password"
              value={currentPw}
              onChange={(e) => setCurrentPw(e.target.value)}
              required
              autoComplete="current-password"
              aria-label="Aktuelles Passwort"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="new-password">Neues Passwort</Label>
            <Input
              id="new-password"
              type="password"
              value={newPw}
              onChange={(e) => setNewPw(e.target.value)}
              required
              minLength={8}
              autoComplete="new-password"
              aria-label="Neues Passwort"
            />
          </div>
          <div className="space-y-2">
            <Label htmlFor="confirm-password">Neues Passwort bestaetigen</Label>
            <Input
              id="confirm-password"
              type="password"
              value={confirmPw}
              onChange={(e) => setConfirmPw(e.target.value)}
              required
              minLength={8}
              autoComplete="new-password"
              aria-label="Neues Passwort bestaetigen"
            />
          </div>
          {pwError && (
            <Alert variant="destructive">
              <AlertDescription>{pwError}</AlertDescription>
            </Alert>
          )}
          {pwSuccess && (
            <Alert>
              <AlertDescription>{pwSuccess}</AlertDescription>
            </Alert>
          )}
          <Button type="submit" disabled={pwLoading}>
            {pwLoading ? "Speichern..." : "Passwort aendern"}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}
