'use client';

import { useState } from "react"
import { cn } from "@/lib/utils"
import { Flame, Clock, TrendingUp, Shuffle, Sparkles } from "lucide-react"

// Tabs ka data - static labels but dynamic functionality
const tabs = [
  { id: "all", label: "All Ideas", icon: Flame },
  { id: "new", label: "New", icon: Clock },
  { id: "trending", label: "Most Liked", icon: TrendingUp },
  { id: "random", label: "Random", icon: Shuffle },
  { id: "ai-picks", label: "AI Picks", icon: Sparkles,  disabled: true  },
]

interface FeedTabsProps {
  activeTab: string
  onTabChange: (tab: string) => void
}

export function FeedTabs({ activeTab, onTabChange }: FeedTabsProps) {
  return (
    <div className="flex items-center gap-1 rounded-2xl glass glass-border p-1.5">
     {tabs.map((tab) => (
  <div key={tab.id} className="relative">
    <button
      onClick={() => !tab.disabled && onTabChange(tab.id)}
      disabled={tab.disabled}
      className={cn(
        "flex items-center gap-2 cursor-pointer rounded-xl px-4 py-2.5 text-sm font-medium transition-all duration-200",
        tab.disabled
          ? "opacity-60 cursor-not-allowed"
          : activeTab === tab.id
          ? "bg-primary text-primary-foreground shadow-lg glow-primary"
          : "text-muted-foreground hover:bg-secondary hover:text-foreground"
      )}
    >
      <tab.icon className="h-4 w-4" />
      <span className="hidden sm:inline">{tab.label}</span>
    </button>

    {/* Badge */}
    {tab.disabled && (
      <span className="absolute -top-2 -right-2 rounded-full bg-primary text-primary-foreground text-[10px] px-2 py-[2px] font-semibold shadow-md">
        Coming Soon
      </span>
    )}
  </div>
))}
    </div>
  )
}