import * as React from "react";
import { ArrowRight } from "lucide-react";
import { Reveal } from "../Reveal";
import { Label, H3, LeadText } from "../Typography";
import { Strikethrough } from "../Strikethrough";
import { cn } from "../../utils/cn";

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

export const ComparisonRow: React.FC<ComparisonRowProps> = ({
  description,
  negativeLabel,
  negativeText,
  positiveLabel,
  positiveText,
  reverse = false,
  delay = 0,
}) => {
  return (
    <Reveal delay={delay}>
      <div className="space-y-4">
        {description && (
          <Label className="text-slate-400 text-[10px] tracking-[0.2em] uppercase">
            {description}
          </Label>
        )}
        <div
          className={cn(
            "flex flex-col gap-8 md:gap-12 items-center",
            reverse ? "md:flex-row-reverse" : "md:flex-row",
          )}
        >
          <div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
            <Label className="mb-4">
              <Strikethrough delay={delay + 0.2}>{negativeLabel}</Strikethrough>
            </Label>
            <LeadText className="leading-snug">
              <Strikethrough delay={delay + 0.3}>{negativeText}</Strikethrough>
            </LeadText>
          </div>

          <div className="shrink-0">
            <ArrowRight
              className={cn(
                "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">
            <Label className="text-slate-900 mb-4">{positiveLabel}</Label>
            <H3 className="text-2xl md:text-3xl">{positiveText}</H3>
          </div>
        </div>
      </div>
    </Reveal>
  );
};
