import * as React from 'react';
import { ArrowRight } from 'lucide-react';
import { Reveal } from '../Reveal';

interface ComparisonRowProps {
  negativeLabel: string;
  negativeText: React.ReactNode;
  positiveLabel: string;
  positiveText: React.ReactNode;
  reverse?: boolean;
  delay?: number;
}

export const ComparisonRow: React.FC<ComparisonRowProps> = ({
  negativeLabel,
  negativeText,
  positiveLabel,
  positiveText,
  reverse = false,
  delay = 0,
}) => {
  return (
    <Reveal delay={delay}>
      <div className={`flex flex-col ${reverse ? 'md:flex-row-reverse' : 'md:flex-row'} gap-8 md:gap-12 items-center`}>
        <div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
          <div className="text-[10px] font-bold uppercase tracking-[0.2em] mb-4 line-through decoration-slate-200">
            {negativeLabel}
          </div>
          <div className="text-lg md:text-xl font-serif italic line-through decoration-slate-200 leading-snug">
            {negativeText}
          </div>
        </div>
        
        <div className="shrink-0">
          <ArrowRight className={`w-6 h-6 text-slate-200 hidden md:block ${reverse ? 'rotate-180' : ''}`} />
        </div>
        
        <div className="flex-1 p-8 md:p-10 border border-slate-100 rounded-2xl bg-white hover:border-slate-200 transition-all duration-500 hover:shadow-xl hover:shadow-slate-100/50 w-full">
          <div className="text-[10px] font-bold uppercase tracking-[0.2em] text-slate-900 mb-4">
            {positiveLabel}
          </div>
          <div className="text-2xl md:text-3xl font-bold text-slate-900 leading-tight tracking-tight">
            {positiveText}
          </div>
        </div>
      </div>
    </Reveal>
  );
};
