'use client'

import { LucideIcon } from 'lucide-react'

interface Feature {
  title: string
  body: string
  icon?: LucideIcon
}

interface FeatureAlternatingProps {
  features: Feature[]
}

export function FeatureAlternating({ features }: FeatureAlternatingProps) {
  return (
    <div className="space-y-16 lg:space-y-20">
      {features.map((feature, index) => {
        const Icon = feature.icon
        const isEven = index % 2 === 0

        return (
          <div
            key={feature.title}
            className={`grid gap-12 items-center ${isEven ? 'lg:grid-cols-[1.1fr_0.9fr]' : 'lg:grid-cols-[0.9fr_1.1fr]'}`}
          >
            <div className={isEven ? 'order-1 lg:order-none' : 'order-2 lg:order-none'}>
              <div className="site-panel">
                <div className="flex items-start gap-3">
                  {Icon && <Icon className="mt-1 h-6 w-6 shrink-0 text-orange-600 dark:text-orange-500" />}
                  <div>
                    <h2 className="text-2xl font-black text-blue-950 dark:text-white sm:text-3xl">
                      {feature.title}
                    </h2>
                    <p className="mt-4 text-base leading-8 text-stone-600 dark:text-stone-300 sm:text-lg">
                      {feature.body}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div
              className={`order-2 lg:order-none ${isEven ? 'order-2 lg:order-none' : 'order-1 lg:order-none'}`}
            >
              <div className="site-panel-muted flex h-48 items-center justify-center sm:h-56 lg:h-80">
                {Icon ? (
                  <Icon className="h-24 w-24 text-orange-600/20 dark:text-orange-500/20" />
                ) : (
                  <div className="text-center">
                    <p className="text-sm font-semibold text-stone-400 dark:text-stone-600">
                      {feature.title}
                    </p>
                  </div>
                )}
              </div>
            </div>
          </div>
        )
      })}
    </div>
  )
}