import { ResponsiveGrid } from '@/components/layout/LayoutPrimitives';
import type { ReactNode } from 'react';
import styles from './SectionPatterns.module.css';

export function FeatureGrid({ children }: { children: ReactNode }) {
  return <ResponsiveGrid className={styles.featureGrid}>{children}</ResponsiveGrid>;
}

export function SplitContent({
  copy,
  media,
  reverse = false,
}: {
  copy: ReactNode;
  media: ReactNode;
  reverse?: boolean;
}) {
  return (
    <div className={`${styles.split} ${reverse ? styles.reverse : ''}`}>
      <div className={styles.copy}>{copy}</div>
      <div className={styles.media}>{media}</div>
    </div>
  );
}

export function MetricStrip({ children }: { children: ReactNode }) {
  return <div className={styles.metricStrip}>{children}</div>;
}

export function LogoStripShell({ label, children }: { label: string; children: ReactNode }) {
  return (
    <div className={styles.logoStrip} role="group" aria-label={label}>
      {children}
    </div>
  );
}
