import Page from '@/components/page'
import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
import ShortResource from '@/app/admin/resources/_client/short'
import LongResource from '@/app/admin/resources/_client/long'
import {Suspense} from 'react'

export default async function ResourcesPage() {
  // ======================
  // render
  // ======================

  return (
    <Page>
      <Tabs defaultValue="short">
        <TabsList className="bg-card p-1.5 rounded-lg">
          <TabsTrigger value="short" className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md">短效套餐</TabsTrigger>
          <TabsTrigger value="long" className="w-30 h-9 data-[state=active]:bg-primary-muted text-base rounded-md">长效套餐</TabsTrigger>
        </TabsList>
        <TabsContent value="short" className="flex flex-col gap-4">
          <Suspense>
            <ShortResource/>
          </Suspense>
        </TabsContent>
        <TabsContent value="long" className="flex flex-col gap-4">
          <Suspense>
            <LongResource/>
          </Suspense>
        </TabsContent>
      </Tabs>
    </Page>
  )
}
