"use client"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ApplicationUI } from "@/components/tailwind-ui/application-ui"
import { MarketingUI } from "@/components/tailwind-ui/marketing"
import { EcommerceUI } from "@/components/tailwind-ui/ecommerce"

export function TailwindUIShowcase() {
  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold tracking-tight">Tailwind UI Components</h1>
        <p className="text-muted-foreground mt-2">
          A showcase of Tailwind UI components with your custom design system applied
        </p>
      </div>

      <Tabs defaultValue="application" className="w-full">
        <TabsList className="bg-background-secondary">
          <TabsTrigger value="application" className="data-[state=active]:bg-background-primary">
            Application UI
          </TabsTrigger>
          <TabsTrigger value="marketing" className="data-[state=active]:bg-background-primary">
            Marketing
          </TabsTrigger>
          <TabsTrigger value="ecommerce" className="data-[state=active]:bg-background-primary">
            E-commerce
          </TabsTrigger>
        </TabsList>
        <TabsContent value="application" className="mt-6">
          <ApplicationUI />
        </TabsContent>
        <TabsContent value="marketing" className="mt-6">
          <MarketingUI />
        </TabsContent>
        <TabsContent value="ecommerce" className="mt-6">
          <EcommerceUI />
        </TabsContent>
      </Tabs>
    </div>
  )
}