'use client';

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

export interface IntroHighlight {
  title: string;
  desc: string;
}

export interface IntroSectionProps {
  title: string;
  paragraph: string;
  highlights?: IntroHighlight[];
}

export function IntroSection({ title, paragraph, highlights }: IntroSectionProps) {
  return (
    <Section title={title}>
      <p className={`${typography.body} leading-relaxed`}>{paragraph}</p>
      {highlights && highlights.length > 0 && (
        <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 gap-3">
          {highlights.map((h) => (
            <div
              key={h.title}
              className="rounded-md p-3"
              style={{
                backgroundColor: colors.bgSecondary,
                border: `1px solid ${colors.border}`,
              }}
            >
              <div className={`${typography.body} font-medium`}>{h.title}</div>
              <div className={`${typography.caption} mt-1`}>{h.desc}</div>
            </div>
          ))}
        </div>
      )}
    </Section>
  );
}