import { BidiText } from '@/components/foundation/BidiText';
import { Icon, type ApprovedIconName } from '@/components/foundation/Icon';
import { Heading, Text, type HeadingLevel } from '@/components/typography/Typography';
import styles from './Workflow.module.css';

export interface WorkflowItem {
  id: string;
  ordinal: string;
  title: string;
  description: string;
  icon?: ApprovedIconName;
}

interface WorkflowProps {
  items: WorkflowItem[];
  label: string;
  headingLevel?: HeadingLevel;
}

export function Workflow({ items, label, headingLevel = 3 }: WorkflowProps) {
  return (
    <ol className={styles.workflow} aria-label={label}>
      {items.map((item, index) => (
        <li key={item.id} className={styles.step}>
          <div className={styles.marker} aria-hidden="true">
            {item.icon ? <Icon name={item.icon} /> : <BidiText>{item.ordinal}</BidiText>}
          </div>
          <div className={styles.content}>
            <Heading level={headingLevel} appearance="subheading">
              {item.title}
            </Heading>
            <Text variant="supporting">{item.description}</Text>
          </div>
          {index < items.length - 1 ? (
            <span className={styles.connector} aria-hidden="true">
              <Icon name="arrow-forward" directionBehavior="mirror" />
            </span>
          ) : null}
        </li>
      ))}
    </ol>
  );
}
