import { Link } from "react-router-dom"
import { useKeyring } from "../hooks"
import { Layout2 } from "@/components/Layout2"
import { BottomNavBar, Header } from "../components"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Button } from "@/components/ui/button"
import { KeyIcon, LockIcon, Trash2, HeartPulse } from "lucide-react"

export const Settings: React.FC = () => {
    const { lock } = useKeyring()

    return (
        <Layout2 innerClassName="bg-muted">
            <Header />
            <div className="flex items-center justify-between px-6 mt-4 mb-4 sm:px-8">
                <h2 className="text-xl font-semibold">Settings</h2>
            </div>
            <ScrollArea className="px-6 mb-4 grow sm:px-8">
                <div className="flex flex-col space-y-4">
                    <Button className="w-[320]" variant="outline" onClick={() => lock()}>
                        <div className="flex flex-row justify-between">
                            <LockIcon className="w-4 h-4 mr-2 text-primary hover:text-foreground" />
                            Lock Wallet
                        </div>
                    </Button>
                    <Button className="w-[320]" variant="outline" asChild>
                        <Link to={"/change-password"}>
                            <div className="flex flex-row justify-between">
                                <KeyIcon className="w-4 h-4 mr-2 text-primary hover:text-foreground" />
                                Change Password
                            </div>
                        </Link>
                    </Button>
                    <Button className="w-[320]" variant="outline" asChild>
                        <Link
                            rel="noreferrer"
                            target="_blank"
                            to={"https://lite.ghostchain.io"}
                        >
                            <div className="flex flex-row justify-between">
                                <HeartPulse className="w-4 h-4 mr-2 text-primary hover:text-foreground" />
                                GHOST Lite
                            </div>
                        </Link>
                    </Button>
                    <Button className="w-[320]" variant="outline" asChild>
                        <Link to={"/delete-wallet"}>
                            <div className="flex flex-row justify-between">
                                <Trash2 className="w-4 h-4 mr-2 text-primary hover:text-foreground" />
                                Delete Wallet
                            </div>
                        </Link>
                    </Button>
                </div>
            </ScrollArea>
            <BottomNavBar currentItem="settings" />
        </Layout2>
    )
}
