import { Icon } from '@/components/foundation/Icon';
import { Card } from '@/components/surfaces/Card';
import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
import styles from './Comparison.module.css';

export interface ComparisonColumn {
  title: string;
  items: string[];
  tone: 'problem' | 'solution';
}

interface ComparisonProps {
  title?: string;
  body?: string;
  columns: [ComparisonColumn, ComparisonColumn];
  headingLevel?: HeadingLevel;
}

export function Comparison({ title, body, columns, headingLevel = 2 }: ComparisonProps) {
  return (
    <div className={styles.wrapper}>
      {title ? (
        <Heading level={headingLevel} appearance="section">
          {title}
        </Heading>
      ) : null}
      {body ? <Text variant="lead">{body}</Text> : null}
      <div className={styles.grid}>
        {columns.map((column) => (
          <Card
            key={column.title}
            tone={column.tone === 'solution' ? 'elevated' : 'muted'}
            className={styles.column}
          >
            <Heading level={(headingLevel + 1) as 2 | 3 | 4 | 5 | 6} appearance="subheading">
              {column.title}
            </Heading>
            <ul>
              {column.items.map((item) => (
                <li key={item}>
                  <Icon name={column.tone === 'solution' ? 'check' : 'minus'} size="sm" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </Card>
        ))}
      </div>
    </div>
  );
}
