// app/components/admin/CommonComponents/PasswordSection.tsx
'use client';

import FormField from './Formfield';

interface PasswordSectionProps {
  password: string;
  confirmPassword: string;
  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  isEdit?: boolean;
  className?: string;
}

export default function PasswordSection({
  password,
  confirmPassword,
  onChange,
  isEdit = false,
  className = '',
}: PasswordSectionProps) {
  return (
    <div className={className}>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <FormField
          id="password"
          name="password"
          label={isEdit ? 'New Password' : 'Password'}
          value={password}
          onChange={onChange}
          type="password"
          placeholder={
            isEdit
              ? 'Enter new password (leave blank to keep current)'
              : 'Enter password'
          }
          required={!isEdit}
        />

        <FormField
          id="confirmPassword"
          name="confirmPassword"
          label={isEdit ? 'Confirm New Password' : 'Confirm Password'}
          value={confirmPassword}
          onChange={onChange}
          type="password"
          placeholder={isEdit ? 'Confirm new password' : 'Confirm password'}
          required={!isEdit}
        />
      </div>

      <p className="text-sm text-var-text-muted mt-2">
        {isEdit
          ? 'Leave blank to keep current password. Password must be at least 6 characters long.'
          : 'Password must be at least 6 characters long.'}
      </p>
    </div>
  );
}