import './ModuleTabs.css'

export type ModuleKey = 'global' | 'phonics' | 'stories'

export interface ModuleDefinition {
  key: ModuleKey
  title: string
  emoji: string
  description: string
  accent: string
}

interface Props {
  modules: ModuleDefinition[]
  active: ModuleKey
  onSelect: (key: ModuleKey) => void
}

export function ModuleTabs({ modules, active, onSelect }: Props) {
  return (
    <div className="module-tabs">
      {modules.map((module) => (
        <button
          key={module.key}
          className={`module-tab ${active === module.key ? 'active' : ''}`}
          style={{ borderColor: module.accent }}
          onClick={() => onSelect(module.key)}
        >
          <span className="module-emoji" aria-hidden>
            {module.emoji}
          </span>
          <div>
            <p className="module-title">{module.title}</p>
            <p className="module-description">{module.description}</p>
          </div>
        </button>
      ))}
    </div>
  )
}
