export type ComparisonRowProps = {
  area: string;
  asIs: string;
  toBe: string;
};

export function ComparisonRow({ area, asIs, toBe }: ComparisonRowProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-[minmax(0,120px)_1fr_1fr] gap-3 items-start py-4 border-b border-neutral-20 last:border-0">
      <span className="body-14-medium text-neutral-80 pt-0 md:pt-3 break-keep">{area}</span>
      <div className="rounded-lg bg-[var(--color-status-critical-bg)]/50 p-3 body-14 text-neutral-70 break-keep">
        {asIs}
      </div>
      <div className="rounded-lg bg-[var(--color-status-good-bg)]/50 p-3 body-14-medium text-neutral-80 break-keep">
        {toBe}
      </div>
    </div>
  );
}