'use client'

import { useState } from 'react'
import DeleteAccountModal from './DeleteAccountModal'

export default function DeleteAccountSection() {
    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)

    return (
        <div className="bg-[#0B0F17] border border-red-900/20 rounded-xl p-6">
            <h2 className="text-lg font-semibold text-red-500 mb-2">Danger Zone</h2>
            <p className="text-sm text-gray-400 mb-4">
                Permanently delete your account and all of your data.
            </p>
            <button
                onClick={() => setIsDeleteModalOpen(true)}
                className="px-4 py-2 rounded-lg bg-red-500/10 text-red-500 hover:bg-red-500/20 hover:text-red-400 border border-red-500/20 transition-all font-medium"
            >
                Delete Account
            </button>

            <DeleteAccountModal
                isOpen={isDeleteModalOpen}
                onClose={() => setIsDeleteModalOpen(false)}
            />
        </div>
    )
}