// Tabs.jsx
import React from 'react'

const TabContext = React.createContext()

function Tabs({ children }) {
  const [selectedTab, setTab] = React.useState(initialTab)

  return (
    <TabContext.Provider value={{ selectedTab, setTab }}>
      <ul className="tab-container">
        {children}
      </ul>
    </TabContext.Provider>
  )
}

Tabs.Item = ({ value, children }) => {
  const ctx = React.useContext(TabContext)
  if (ctx === undefined) {
    throw new Error('<Tabs.Item> 컴포넌트는 <Tabs> 컴포넌트 아래에서만 사용될 수 있습니다.')
  }
  const { selectedTab, setTab } = ctx
  
  return (
    <li
      onClick={() => setTab(value)}
      className={`tab-item ${selectedTab === value ? 'selected' : ''}`}
    >
      {children}
    </li>
  )
}