"use client";

import { motion } from "framer-motion";
import type { LucideIcon } from "lucide-react";

import { cn } from "@/lib/utils";

export interface HowItWorksStepProps {
  number: number;
  title: string;
  description: string;
  icon: LucideIcon;
  previewClassName: string;
  reversed?: boolean;
}

export function HowItWorksStep({
  number,
  title,
  description,
  icon: Icon,
  previewClassName,
  reversed = false,
}: HowItWorksStepProps) {
  const slideFrom = reversed ? 48 : -48;

  return (
    <div
      className={cn(
        "grid items-center gap-8 lg:grid-cols-2 lg:gap-16",
        reversed && "lg:[&>*:first-child]:order-2 lg:[&>*:last-child]:order-1"
      )}
    >
      <motion.div
        initial={{ opacity: 0, x: slideFrom }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true, margin: "-80px" }}
        transition={{ duration: 0.4, ease: "easeOut" }}
        className="flex gap-5"
      >
        <div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-primary-600 font-heading text-lg font-bold text-white shadow-sm">
          {number}
        </div>
        <div>
          <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-primary-50 text-primary-600">
            <Icon className="h-5 w-5" aria-hidden />
          </div>
          <h3 className="font-heading text-xl font-bold text-neutral-900 sm:text-2xl">
            {title}
          </h3>
          <p className="mt-3 text-base leading-relaxed text-neutral-600">
            {description}
          </p>
        </div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, x: -slideFrom }}
        whileInView={{ opacity: 1, x: 0 }}
        viewport={{ once: true, margin: "-80px" }}
        transition={{ duration: 0.4, ease: "easeOut", delay: 0.08 }}
        className={cn(
          "flex aspect-[4/3] items-center justify-center rounded-xl border shadow-sm",
          previewClassName
        )}
        aria-hidden
      >
        <Icon className="h-20 w-20 opacity-30" />
      </motion.div>
    </div>
  );
}