export type StatItem = {
  label: string;
  value: string;
  suffix: string;
};

export type StatsProps = {
  items: StatItem[];
  columns: 2 | 3 | 4;
  align: 'left' | 'center' | 'right';
  showDivider: boolean;
  padding: string;
};

const alignClass = {
  left: 'text-left',
  center: 'text-center',
  right: 'text-right',
};

export default function StatsSection({
  items,
  columns,
  align,
  showDivider,
  padding,
}: StatsProps) {
  return (
    <div style={{ padding }}>
      <div
        className="grid"
        style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}
      >
        {items.map((item, i) => (
          <div
            key={i}
            className={`flex flex-col gap-2 px-6 py-4 ${alignClass[align]} ${
              showDivider && i !== 0 ? 'border-l border-border' : ''
            }`}
          >
            <span className="text-3xl font-bold text-primary">
              {item.value}
              {item.suffix && <span className="text-xl">{item.suffix}</span>}
            </span>
            <span className="text-sm text-muted-foreground">{item.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}