import { useState } from 'react';
import { ChevronDown } from 'lucide-react';

interface ProductFeature2Props {
  title: string;
  fullDescription?: string;
  images?: string[];
  data?: { title: string; content: string }[];
}

export default function ProductFeature2({ title, fullDescription, images, data }: ProductFeature2Props) {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div className="py-12">
      <h2 className="text-2xl font-bold text-center mb-8">{title}</h2>
      
      <div className="grid lg:grid-cols-2 gap-12">
        <div>
          {images?.[activeTab] && (
            <img
              src={images[activeTab]}
              alt=""
              className="w-full rounded-xl"
            />
          )}
        </div>
        
        <div>
          <div className="flex gap-4 mb-6 overflow-x-auto">
            {data?.map((tab, i) => (
              <button
                key={i}
                onClick={() => setActiveTab(i)}
                className={`px-4 py-2 rounded-lg whitespace-nowrap ${
                  activeTab === i ? 'bg-blue-600 text-white' : 'bg-gray-100'
                }`}
              >
                {tab.title}
              </button>
            ))}
          </div>
          
          {data?.[activeTab] && (
            <div className="prose">
              <p>{data[activeTab].content}</p>
            </div>
          )}
          
          {fullDescription && (
            <p className="mt-6 text-gray-600">{fullDescription}</p>
          )}
        </div>
      </div>
    </div>
  );
}
