'use client';

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

interface SecurityQuestionsProps {
  questions: SecurityQuestion[];
  onUpdate: (updates: Partial<SecuritySettings>) => void;
}

export function SecurityQuestions({ questions, onUpdate }: SecurityQuestionsProps) {
  return (
    <Card>
      <CardHeader>
        <CardTitle>安全问题</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {questions.map((question, index) => (
            <div key={question.id} className="p-4 border rounded-lg">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">问题 {index + 1}: {question.question}</p>
                  <p className="text-sm text-gray-600">
                    {question.isEnabled ? '已启用' : '已禁用'}
                  </p>
                </div>
              </div>
            </div>
          ))}

          {questions.length === 0 && (
            <div className="text-center py-8 text-gray-500">
              <p>尚未设置安全问题</p>
              <p className="text-sm">设置安全问题可以在忘记密码时恢复账户</p>
            </div>
          )}
        </div>
      </CardContent>
    </Card>
  );
}