import React, { useState } from 'react'
import styles from '@/app/styles/components/Tabs.module.css'

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

interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
  tabs: TabItem[]
  defaultTab?: string
  vertical?: boolean
  compact?: boolean
  onChange?: (tabId: string) => void
}

const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
  (
    { tabs, defaultTab, vertical = false, compact = false, onChange, className = '', ...props },
    ref
  ) => {
    const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.id)

    const handleTabChange = (tabId: string) => {
      setActiveTab(tabId)
      onChange?.(tabId)
    }

    const containerClass = `${styles.tabs} ${vertical ? styles['tabs--vertical'] : ''} ${compact ? styles['tabs--compact'] : ''} ${className}`.trim()

    return (
      <div ref={ref} className={containerClass} {...props}>
        <div className={styles.tabs__list} role="tablist">
          {tabs.map((tab) => (
            <button
              key={tab.id}
              className={`${styles.tabs__trigger} ${activeTab === tab.id ? styles.active : ''}`.trim()}
              onClick={() => handleTabChange(tab.id)}
              role="tab"
              aria-selected={activeTab === tab.id}
              aria-controls={`tab-content-${tab.id}`}
            >
              {tab.label}
            </button>
          ))}
        </div>
        {tabs.map((tab) => (
          <div
            key={tab.id}
            id={`tab-content-${tab.id}`}
            className={`${styles.tabs__content} ${activeTab === tab.id ? styles.active : ''}`.trim()}
            role="tabpanel"
            aria-labelledby={`tab-${tab.id}`}
          >
            {tab.content}
          </div>
        ))}
      </div>
    )
  }
)

Tabs.displayName = 'Tabs'

export default Tabs