import { useState } from 'react'
import AppInfoTab from './tabs/AppInfoTab'
import ColoursTab from './tabs/ColoursTab'

const TABS = [
  { key: 'app-info', label: 'App Info' },
  { key: 'colours',  label: 'UI Personalization' },
]

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState('app-info')

  return (
    <div style={{ width: '100%' }}>
      <h1 className="text-xl font-bold text-gray-800" style={{ marginBottom: 20 }}>Ρυθμίσεις</h1>

      {/* Tab bar */}
      <div style={{
        display: 'flex', gap: 4,
        borderBottom: '2px solid #e5e7eb',
        marginBottom: 28,
      }}>
        {TABS.map(tab => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            style={{
              padding: '10px 20px',
              fontSize: 14,
              fontWeight: 600,
              border: 'none',
              background: 'none',
              cursor: 'pointer',
              color: activeTab === tab.key ? '#3758c9' : '#6b7280',
              borderBottom: `2px solid ${activeTab === tab.key ? '#3758c9' : 'transparent'}`,
              marginBottom: -2,
              borderRadius: '6px 6px 0 0',
              transition: 'color 0.12s',
            }}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Tab content */}
      {activeTab === 'app-info' && <AppInfoTab />}
      {activeTab === 'colours'  && <ColoursTab />}
    </div>
  )
}