zellyy-finance/src/pages/PaymentMethods.tsx

import React from 'react';
import NavBar from '@/components/NavBar';
import { ArrowLeft, CreditCard, PlusCircle } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { useToast } from '@/hooks/useToast.wrapper';

const PaymentMethods = () => {
  const navigate = useNavigate();
  const { toast } = useToast();
  
  const handleAddPayment = () => {
    toast({
      title: "알림",
      description: "이 결제 기능은 아직 지원하지 않습니다."
    });
  };
  
  return <div className="min-h-screen bg-neuro-background pb-24">
      <div className="max-w-md mx-auto px-6">
        {/* Header */}
        <header className="py-8">
          <div className="flex items-center mb-6">
            <Button variant="ghost" size="icon" onClick={() => navigate('/settings')} className="mr-2">
              <ArrowLeft size={20} />
            </Button>
            <h1 className="text-2xl font-bold neuro-text">결제 방법</h1>
          </div>
        </header>

        {/* 등록된 결제 수단이 없습니다 메시지 */}
        <div className="neuro-flat p-6 mb-6 text-center">
          <div className="flex flex-col items-center">
            <div className="neuro-pressed p-3 rounded-full text-gray-400 mb-4">
              <CreditCard size={24} />
            </div>
            <h3 className="font-medium mb-2">등록된 결제 수단이 없습니다</h3>
            <p className="text-sm text-gray-500">
              새로운 결제 수단을 추가해 보세요
            </p>
          </div>
        </div>

        {/* Notice */}
        <div className="mb-8 p-4 bg-amber-50 rounded-md border border-amber-200">
          <p className="text-sm text-center text-neuro-income">결제 기능은 아직 지원하지 않습니다.</p>
        </div>

        {/* Add Payment Method Button */}
        <div className="mt-8">
          <Button className="w-full bg-gray-400 hover:bg-gray-400/90 text-white cursor-not-allowed" onClick={handleAddPayment}>
            <PlusCircle size={16} className="mr-2" />
            새 결제 수단 추가
          </Button>
        </div>
      </div>

      <NavBar />
    </div>;
};

export default PaymentMethods;