import * as React from 'react';
import { motion } from 'motion/react';

import { cn } from '@workspace/ui/lib/utils';
import { Button } from '@workspace/ui/components/ui/button'; // Assuming Button exists

// Define types for steps
interface StepItem {
  title: string;
  description: string;
  // Optional: 'What you do' and 'What we do' bullets
  youDo?: string;
  weDo?: string;
}

export interface StepsProps extends React.HTMLAttributes<HTMLDivElement> {
  steps: StepItem[];
  title?: string; // Optional title for the section
  ctaText?: string; // Text for the CTA button
  ctaHref?: string; // Href for the CTA button
}

export function Steps({ steps, title, ctaText, ctaHref, className, ...props }: StepsProps) {
  return (
    <div className={cn("w-full", className)} {...props}>
      {title && <h2 className="text-2xl font-bold mb-8">{title}</h2>}
      <div className="relative">
        {/* Vertical line */}
        <div className="absolute left-4 top-0 h-full w-0.5 bg-border transform -translate-x-1/2 md:left-8 md:w-1"></div>
        
        <ol className="relative space-y-12 pl-10 md:pl-20">
          {steps.map((step, index) => (
            <motion.li
              key={index}
              className="relative"
              initial={{ opacity: 0, x: -20 }}
              whileInView={{ opacity: 1, x: 0 }}
              viewport={{ once: true, margin: "-100px" }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
            >
              {/* Step number circle */}
              <div className="absolute left-[-34px] top-0 flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground md:left-[-52px] md:h-12 md:w-12">
                <span className="text-sm font-bold md:text-base">{index + 1}</span>
              </div>
              
              <div>
                <h3 className="text-lg font-semibold">{step.title}</h3>
                <p className="mt-1 text-muted-foreground">{step.description}</p>
                
                {/* Optional bullets */}
                {(step.youDo || step.weDo) && (
                  <ul className="mt-3 space-y-1 text-sm">
                    {step.youDo && (
                      <li className="flex items-start">
                        <span className="mr-2 text-primary">•</span>
                        <span><span className="font-medium">You:</span> {step.youDo}</span>
                      </li>
                    )}
                    {step.weDo && (
                      <li className="flex items-start">
                        <span className="mr-2 text-primary">•</span>
                        <span><span className="font-medium">We:</span> {step.weDo}</span>
                      </li>
                    )}
                  </ul>
                )}
              </div>
            </motion.li>
          ))}
        </ol>
      </div>
      
      {/* CTA Button */}
      {ctaText && ctaHref && (
        <div className="mt-12 flex justify-center">
          <Button asChild>
            <a href={ctaHref}>{ctaText}</a>
          </Button>
        </div>
      )}
    </div>
  );
}