import * as React from 'react';
import { CheckCircle2 } from 'lucide-react';
import { cn } from '../../shared/utils';

export interface FeatureRowProps extends React.HTMLAttributes<HTMLElement> {
  eyebrow?: string;
  title: string;
  description?: string;
  bullets?: string[];
  visual: React.ReactNode;
  reverse?: boolean;
  tone?: 'default' | 'muted' | 'card';
}

/**
 * Alternating text + visual marketing section.
 *
 * @description
 * A two-column "how it works" / definition row: a text block (eyebrow,
 * title, description, optional checklist) paired with a consumer-supplied
 * visual (image, illustration, or custom node). Stacks on mobile and
 * alternates sides on desktop via `reverse`.
 *
 * @ai-rules
 * 1. Chain multiple `FeatureRow`s and alternate `reverse` to build a "how it works" narrative.
 * 2. Pass the visual as `<ImageWithFallback />` or any custom `ReactNode`; this component never renders an image itself.
 * 3. Use `tone="muted"` on every other row to create a subtle section break instead of adding manual dividers; use `tone="card"` when a theme needs a stronger, genuinely lighter break (some themes set `--muted` equal to `--background`).
 */
export function FeatureRow({
  eyebrow,
  title,
  description,
  bullets,
  visual,
  reverse = false,
  tone = 'default',
  className,
  ...props
}: FeatureRowProps) {
  return (
    <section
      className={cn(
        'py-16 md:py-24',
        tone === 'muted' ? 'bg-muted' : tone === 'card' ? 'bg-card' : 'bg-background',
        className
      )}
      {...props}
    >
      <div className="mx-auto grid max-w-6xl gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:items-center lg:px-8">
        <div className={cn(reverse ? 'lg:order-last' : 'lg:order-first')}>
          {eyebrow && (
            <p className="text-sm font-semibold uppercase tracking-wide text-primary">
              {eyebrow}
            </p>
          )}
          <h2 className={cn('text-2xl font-bold text-foreground md:text-3xl', eyebrow && 'mt-2')}>
            {title}
          </h2>
          {description && (
            <p className="mt-6 text-muted-foreground leading-relaxed">{description}</p>
          )}
          {bullets && bullets.length > 0 && (
            <ul className="mt-4 space-y-2">
              {bullets.map(bullet => (
                <li key={bullet} className="flex items-start gap-2">
                  <CheckCircle2 className="size-5 shrink-0 text-primary" />
                  <span className="text-foreground">{bullet}</span>
                </li>
              ))}
            </ul>
          )}
        </div>

        <div className={cn(reverse ? 'lg:order-first' : 'lg:order-last')}>{visual}</div>
      </div>
    </section>
  );
}