import { INTRO } from './introText.js'

const TAGS = [
  { label: 'Curieux', tone: 'pos' },
  { label: 'Polyvalent', tone: 'pos' },
  { label: 'Autodidacte', tone: 'pos' },
  { label: 'Persévérance', tone: 'pos' },
  { label: "Esprit d'Analyse", tone: 'pos' },
  { label: 'Autonomie', tone: 'pos' },
  { label: 'Impatient', tone: 'neg' },
  { label: 'Besoin de comprendre', tone: 'neg' },
  { label: 'Pédagogie', tone: 'neg' },
]

export function HomeIntroPanel() {
  return (
    <div className="home-intro">
      <p className="home-intro__text">{INTRO}</p>
      <ul className="home-intro__tags" aria-label="Traits">
        {TAGS.map(({ label, tone }) => (
          <li key={label}>
            <span className={`home-tag home-tag--${tone}`}>{label}</span>
          </li>
        ))}
      </ul>
    </div>
  )
}
