'use client'

import { useTranslations } from 'next-intl'
import { useAccount } from 'wagmi'
import { useConnectModal } from '@rainbow-me/rainbowkit'

export default function SettingsClient() {
  const t = useTranslations('settings')
  const { isConnected } = useAccount()
  const { openConnectModal } = useConnectModal()

  if (!isConnected) {
    return (
      <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-10 text-center">
        <p className="text-[14px] text-[#555555] mb-4">{t('connectRequired')}</p>
        <button
          onClick={openConnectModal}
          className="bg-[#f97316] text-black font-medium text-[13px] rounded-lg px-6 py-2.5 hover:bg-[#fb923c] transition-colors"
        >
          Connect wallet
        </button>
      </div>
    )
  }

  return (
    <div className="bg-[#0a0a0a] border border-[#141414] rounded-[10px] p-10 text-center">
      <p className="text-[14px] text-[#555555]">{t('comingSoon')}</p>
    </div>
  )
}