"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 { useProfileSettings } from "@/hooks/useProfileSettings";

type ProfileSectionProps = Pick<
  ReturnType<typeof useProfileSettings>,
  "email" | "setEmail" | "emailError" | "emailSuccess" | "emailLoading" | "handleChangeEmail"
>;

export function ProfileSection({
  email,
  setEmail,
  emailError,
  emailSuccess,
  emailLoading,
  handleChangeEmail,
}: ProfileSectionProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>E-Mail-Adresse aendern</CardTitle>
      </CardHeader>
      <CardContent>
        <form onSubmit={handleChangeEmail} className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="email">E-Mail-Adresse</Label>
            <Input
              id="email"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              autoComplete="email"
              aria-label="E-Mail-Adresse"
            />
          </div>
          {emailError && (
            <Alert variant="destructive">
              <AlertDescription>{emailError}</AlertDescription>
            </Alert>
          )}
          {emailSuccess && (
            <Alert>
              <AlertDescription>{emailSuccess}</AlertDescription>
            </Alert>
          )}
          <Button type="submit" disabled={emailLoading}>
            {emailLoading ? "Speichern..." : "E-Mail aendern"}
          </Button>
        </form>
      </CardContent>
    </Card>
  );
}
