import { Icon } from '@/components/foundation/Icon';
import { Container, Section } from '@/components/layout/LayoutPrimitives';
import { SectionHeader } from '@/components/marketing/SectionHeader';
import { Card } from '@/components/surfaces/Card';
import type { HomepageContent } from '@/content/homepage-model';
import styles from './IntegrationsSection.module.css';

export function IntegrationsSection({ content }: { content: HomepageContent['integrations'] }) {
  return (
    <Section aria-label={content.title}>
      <Container>
        <div className={styles.splitSection}>
          <SectionHeader eyebrow={content.eyebrow} title={content.title} body={content.body} />
          <Card as="div" tone="elevated" padding="spacious">
            <ul className={styles.capabilityList}>
              {content.items.map((item) => (
                <li key={item}>
                  <Icon name="plus" size="sm" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </Card>
        </div>
      </Container>
    </Section>
  );
}
