"use client";

import React from 'react';
import Image from 'next/image';

interface ImpactItem {
  title: string;
  description: string;
  stat1Label: string;
  stat1Value: string;
  stat2Label: string;
  stat2Value: string;
  image: string;
}

interface BusinessImpactProps {
  items: ImpactItem[];
}

export const BusinessImpact: React.FC<BusinessImpactProps> = ({ items }) => {
  const [activeIndex, setActiveIndex] = React.useState(0);

  return (
    <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
      <div className="lg:col-span-5 space-y-4">
        {items.map((item, index) => (
          <div 
            key={index}
            className={`p-6 rounded-xl cursor-pointer transition-all duration-500 border ${
              activeIndex === index 
                ? 'bg-ui-dark/90 border-primary shadow-lg shadow-primary/10' 
                : 'bg-ui-dark/40 border-ui-border hover:border-ui-border/80'
            }`}
            onClick={() => setActiveIndex(index)}
          >
            <h4 className={`text-xl font-semibold mb-2 transition-colors ${
              activeIndex === index ? 'text-white' : 'text-neutral-gray'
            }`}>
              {item.title}
            </h4>
            <p className={`text-sm leading-relaxed transition-colors ${
              activeIndex === index ? 'text-neutral-light' : 'text-neutral-gray/60'
            }`}>
              {activeIndex === index ? item.description : item.description.substring(0, 80) + '...'}
            </p>
          </div>
        ))}
      </div>

      <div className="lg:col-span-7 relative aspect-video rounded-2xl overflow-hidden border border-ui-border shadow-2xl group">
        {items.map((item, index) => (
          <div 
            key={index}
            className={`absolute inset-0 transition-all duration-700 ease-in-out ${
              activeIndex === index ? 'opacity-100 scale-100' : 'opacity-0 scale-105 pointer-events-none'
            }`}
          >
            <Image 
              src={item.image} 
              alt={item.title} 
              fill 
              className="object-cover"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent"></div>
            <div className="absolute inset-0 p-8 flex flex-col justify-end">
              <div className="grid grid-cols-2 gap-8 max-w-md">
                <div>
                  <div className="text-3xl font-bold text-primary mb-1">{item.stat1Value}</div>
                  <div className="text-xs text-neutral-gray uppercase tracking-wider">{item.stat1Label}</div>
                </div>
                <div>
                  <div className="text-3xl font-bold text-primary mb-1">{item.stat2Value}</div>
                  <div className="text-xs text-neutral-gray uppercase tracking-wider">{item.stat2Label}</div>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};