'use client'
import React from 'react'
import { Button } from '@/components/ui/Button'

interface ConceptExplainerContent {
  type: 'concept_explainer'
  paragraphs: string[]
  example: string
}

interface Props {
  content: ConceptExplainerContent
  onComplete: () => void
}

export function ConceptExplainer({ content, onComplete }: Props) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)' }}>
        {content.paragraphs.map((para, i) => (
          <p
            key={i}
            style={{
              margin: 0,
              fontSize: 'var(--t-body)',
              lineHeight: 1.65,
              color: 'var(--fg)',
            }}
          >
            {para}
          </p>
        ))}
      </div>

      {content.example && (
        <div
          style={{
            background: 'var(--bg-warm)',
            borderLeft: '4px solid var(--accent)',
            borderRadius: 'var(--r-sm)',
            padding: 'var(--s-4)',
          }}
        >
          <p
            style={{
              margin: '0 0 var(--s-2)',
              fontSize: 'var(--t-label)',
              fontFamily: 'var(--font-mono)',
              textTransform: 'uppercase',
              letterSpacing: 'var(--label-ls)',
              color: 'var(--fg-muted)',
            }}
          >
            Example
          </p>
          <p style={{ margin: 0, fontSize: 'var(--t-body)', lineHeight: 1.6 }}>
            {content.example}
          </p>
        </div>
      )}

      <Button variant="primary" onClick={onComplete} style={{ alignSelf: 'flex-end' }}>
        Mark complete
      </Button>
    </div>
  )
}
