import React from 'react';

interface ComparisonGridItem {
  label: string;
  leftValue: string;
  rightValue: string;
}

interface ComparisonGridProps {
  title?: string;
  leftLabel: string;
  rightLabel: string;
  items: ComparisonGridItem[];
}

export default function ComparisonGrid({ title, leftLabel, rightLabel, items }: ComparisonGridProps) {
  return (
    <div className="my-16 not-prose">
      {title && (
        <h3 className="text-2xl font-bold text-text-primary mb-8">
          {title}
        </h3>
      )}
      <div className="border border-neutral-200 rounded-3xl overflow-hidden shadow-sm bg-white">
        <div className="grid grid-cols-3 bg-neutral-50 border-b border-neutral-200">
          <div className="p-4 md:p-6"></div>
          <div className="p-4 md:p-6 text-center font-bold text-primary uppercase tracking-widest border-l border-neutral-200 text-xs md:text-sm">
            {leftLabel}
          </div>
          <div className="p-4 md:p-6 text-center font-bold text-primary uppercase tracking-widest border-l border-neutral-200 text-xs md:text-sm">
            {rightLabel}
          </div>
        </div>
        {items.map((item, index) => (
          <div key={index} className="grid grid-cols-3 border-b border-neutral-200 last:border-0 hover:bg-neutral-50 transition-colors group">
            <div className="p-4 md:p-6 font-bold text-text-primary flex items-center text-sm md:text-base">
              {item.label}
            </div>
            <div className="p-4 md:p-6 text-center text-text-secondary border-l border-neutral-200 flex items-center justify-center group-hover:text-text-primary transition-colors text-sm md:text-base">
              {item.leftValue}
            </div>
            <div className="p-4 md:p-6 text-center text-text-secondary border-l border-neutral-200 flex items-center justify-center group-hover:text-text-primary transition-colors text-sm md:text-base">
              {item.rightValue}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}