'use client';

import { Section } from './Section';
import { colors, typography } from '@/styles/theme';

export interface ConceptItem {
  term: string;
  desc: string;
}

export interface ConceptsSectionProps {
  title: string;
  description?: string;
  items: ConceptItem[];
}

export function ConceptsSection({ title, description, items }: ConceptsSectionProps) {
  return (
    <Section title={title} description={description}>
      <dl>
        {items.map((c, idx) => (
          <div
            key={c.term}
            className="py-3 grid grid-cols-[140px_1fr] gap-4"
            style={idx > 0 ? { borderTop: `1px solid ${colors.bgTertiary}` } : undefined}
          >
            <dt className={`${typography.body} font-medium`}>{c.term}</dt>
            <dd className={typography.bodySecondary}>{c.desc}</dd>
          </div>
        ))}
      </dl>
    </Section>
  );
}