"use client"
import React from "react";
import { useState } from "react";
import item from "@/types/item";



type Props = {
    items : item[]
}




const BuildConfiguration : React.FC<Props> = ({items}) => {
  const [hoverIndex, setHoverIndex] = useState<number>(0);

  const handleMouseEnter = (e : number) => {
    setHoverIndex(e);
  };

 
    return (
        <div className="flex flex-row px-32 py-16">
            <div className="basis-1/3"> 
              <p>I am the picture area</p>
            </div>
            <div className="basis-2/3">
            {items.map((item, index) => (
                <div key={index} onMouseEnter={() => handleMouseEnter(index)}  className="pb-3">
                  <hr className={`border-solid border-[1.5px] mb-3 ${
              hoverIndex === index ? 'border-black' : 'border-greylite' // Change text color on hover
            }`}/>
                    <p className={`text-7xl font-medium font-sans pb-2 ${
              hoverIndex === index ? 'text-black' : 'text-greylite' // Change text color on hover
            }`}>{item.title}</p>
                    {
                      hoverIndex === index ? 
                      <p className="text-lg">{item.subtitle}</p>
                      : <div></div>
                    }
                    
                </div>
            ))}
</div>

        </div>
    )
}

export default BuildConfiguration