import React, { useState } from 'react';
import SecurityHeader from '@/components/security/SecurityHeader';
import SecuritySettingsList from '@/components/security/SecuritySettingsList';
import DataResetSection from '@/components/security/DataResetSection';
import SaveSettingsButton from '@/components/security/SaveSettingsButton';
import { SecuritySetting } from '@/components/security/types';
import { FingerprintIcon, EyeOffIcon, LockIcon } from 'lucide-react';

const SecurityPrivacySettings = () => {
  const [securitySettings, setSecuritySettings] = useState<SecuritySetting[]>([
    {
      id: 'biometric',
      title: '생체 인증 사용',
      description: '지문 또는 Face ID를 사용하여 앱에 로그인합니다.',
      icon: <FingerprintIcon size={20} />,
      enabled: false,
    },
    {
      id: 'screen_lock',
      title: '앱 화면 잠금',
      description: '일정 시간 미사용 시 자동으로 앱 화면을 잠급니다.',
      icon: <LockIcon size={20} />,
      enabled: true,
    },
    {
      id: 'private_mode',
      title: '프라이빗 모드',
      description: '잔액과 지출 내역을 다른 사람에게 숨깁니다.',
      icon: <EyeOffIcon size={20} />,
      enabled: false,
    },
  ]);

  const handleSaveSettings = () => {
    // 설정 저장 로직
    console.log('보안 설정 저장:', securitySettings);
  };

  return (
    <div className="min-h-screen bg-neuro-background pb-20">
      <div className="max-w-md mx-auto px-6">
        <SecurityHeader />
        
        <SecuritySettingsList 
          settings={securitySettings}
          setSettings={setSecuritySettings}
        />
        
        <DataResetSection />
        
        <SaveSettingsButton onSave={handleSaveSettings} />
      </div>
    </div>
  );
};

export default SecurityPrivacySettings;