'use client';

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import type { SecuritySettings } from '../types';

interface TwoFactorAuthProps {
  securitySettings: SecuritySettings | null;
  onUpdate: (updates: Partial<SecuritySettings>) => void;
}

export function TwoFactorAuth({ securitySettings, onUpdate }: TwoFactorAuthProps) {
  const handleToggle = () => {
    onUpdate({ twoFactorEnabled: !securitySettings?.twoFactorEnabled });
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>双因素认证</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="flex items-center justify-between">
          <div>
            <p className="font-medium">
              {securitySettings?.twoFactorEnabled ? '已启用' : '未启用'}
            </p>
            <p className="text-sm text-gray-600">
              为您的账户添加额外的安全保护
            </p>
          </div>
          <Button
            variant={securitySettings?.twoFactorEnabled ? "destructive" : "default"}
            onClick={handleToggle}
          >
            {securitySettings?.twoFactorEnabled ? '禁用' : '启用'}
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}