'use client'

import { useState } from 'react'

interface Tab {
  id: string
  label: string
  content: React.ReactNode
}

interface ProductTabsProps {
  tabs: Tab[]
}

// Pure CSS (no framer-motion): the active-tab underline is a plain absolutely
// positioned bar and the panel fades in via the `animate-tab-in` keyframe
// (re-triggered by `key={activeTab}`). This was the only storefront component
// needing framer-motion's full runtime (`layoutId` shared-layout animation),
// which made the product page's first-load JS ~100 KB heavier than every
// other page.
export default function ProductTabs({ tabs }: ProductTabsProps) {
  const [activeTab, setActiveTab] = useState(tabs[0].id)

  return (
    <div className="mt-8">
      {/* Tab Headers */}
      <div className="flex border-b border-gray-200" role="tablist">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            role="tab"
            aria-selected={activeTab === tab.id}
            onClick={() => setActiveTab(tab.id)}
            className={`px-6 py-3 font-medium transition-all relative ${
              activeTab === tab.id
                ? 'text-primary'
                : 'text-gray-custom hover:text-dark'
            }`}
          >
            {tab.label}
            {activeTab === tab.id && (
              <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-gradient-primary" />
            )}
          </button>
        ))}
      </div>

      {/* Tab Content */}
      <div className="p-6 bg-gray-50 rounded-b-xl">
        <div key={activeTab} role="tabpanel" className="animate-tab-in">
          {tabs.find(tab => tab.id === activeTab)?.content}
        </div>
      </div>
    </div>
  )
}