import React from "react";
import Card from "./Card";
import Input from "../Input";
import Button from "../Button";

interface PasswordData {
  currentPassword: string;
  newPassword: string;
  confirmPassword: string;
}

interface PasswordSectionProps {
  passwords: PasswordData;
  onPasswordChange: (field: keyof PasswordData, value: string) => void;
  onUpdate: () => void;
}

export const PasswordSection: React.FC<PasswordSectionProps> = ({
  passwords,
  onPasswordChange,
  onUpdate,
}) => {
  return (
    <div id="password" className="scroll-mt-20">
      <Card title="Password & Security">
        <Input
          label="Current password"
          type="password"
          placeholder="Enter current password"
          value={passwords.currentPassword}
          onChange={(e) => onPasswordChange('currentPassword', e.target.value)}
        />
        <Input
          label="New password"
          type="password"
          placeholder="Enter new password"
          value={passwords.newPassword}
          onChange={(e) => onPasswordChange('newPassword', e.target.value)}
        />
        <Input
          label="Confirm new password"
          type="password"
          placeholder="Confirm new password"
          value={passwords.confirmPassword}
          onChange={(e) => onPasswordChange('confirmPassword', e.target.value)}
        />
 
        <div className="mt-4">
          <Button type="submit" bgColor="#521392" onClick={onUpdate}>
            Update Password
          </Button>
        </div>
      </Card>
    </div>
  );
};