'use client';

import { useTranslation } from 'react-i18next';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { SwapForm } from '@/components/swap-form';
import { TokenCountDisplay } from '@/components/token-count-display';

export default function HomePage() {
  const { t } = useTranslation();

  return (
    <div className="max-w-2xl mx-auto">
      <Tabs defaultValue="swap" className="w-full">
        <TabsList className="grid w-full grid-cols-2 mb-8">
          <TabsTrigger value="swap">{t('nav.swap')}</TabsTrigger>
          <TabsTrigger value="stake">{t('nav.stake')}</TabsTrigger>
        </TabsList>

        <TabsContent value="swap">
          <div className="space-y-6">
            <TokenCountDisplay />
            <SwapForm />
          </div>
        </TabsContent>

        <TabsContent value="stake">
          <div className="text-center py-12 text-muted-foreground">
            <h2 className="text-2xl font-semibold mb-2">{t('stake.title')}</h2>
            <p>{t('stake.comingSoon')}</p>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}