"use client"

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

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 },
]

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) => (
        <button
          key={tab.id}
          onClick={() => onTabChange(tab.id)}
          className={cn(
            "flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium transition-all duration-200",
            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>
      ))}
    </div>
  )
}