Tabs

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { IconHome, IconUser, IconSettings } from "@tabler/icons-react"

const EnhancedTabs = () => {
  return (
    <Tabs defaultValue="home">
      {/* Pills variant with icons and badges */}
      <TabsList variant="pills">
        <TabsTrigger value="home" variant="pills" icon={<IconHome className="h-4 w-4" />}>
          Home
        </TabsTrigger>
        <TabsTrigger value="profile" variant="pills" icon={<IconUser className="h-4 w-4" />}>
          Profile
        </TabsTrigger>
        <TabsTrigger value="settings" variant="pills" icon={<IconSettings className="h-4 w-4" />} badge={<span className="bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5">3</span>}>
          Settings
        </TabsTrigger>
      </TabsList>

      <TabsContent value="home">
        <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
          <h4 className="font-medium mb-2">Welcome Home</h4>
          <p className="text-sm text-muted-foreground">Your personalized dashboard and recent activity.</p>
        </div>
      </TabsContent>

      <TabsContent value="profile">
        <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
          <h4 className="font-medium mb-2">User Profile</h4>
          <p className="text-sm text-muted-foreground">Manage your profile settings and personal information.</p>
        </div>
      </TabsContent>

      <TabsContent value="settings">
        <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg">
          <h4 className="font-medium mb-2">Settings</h4>
          <p className="text-sm text-muted-foreground">Configure your preferences and account settings.</p>
        </div>
      </TabsContent>
    </Tabs>
  )
}