"use client"
import { useState } from "react"
// import { Search, MessageSquare } from "lucide-react"
import IntegratedStrategy from "../components/IntegratedStrategy"
import Vector from "../assets/icons/Vector.svg"
import Vector2 from "../assets/icons/Vector2.svg"
import ShowDetails from "../components/Strategy/ShowDetails"
import ProgressMetrics from "../components/Strategy/ProgressMetrics"
import RoadmapSidebar from "../components/Strategy/RoadmapSidebar"
import HeaderPage from "../components/shared/HeaderPage"
import ContainerPage from "../components/shared/ContainerPage"




// Main integrated dashboard component
function Strategy() {
    const [selectedKeyword, setSelectedKeyword] = useState("CPA Los Angeles")

    return (
        <ContainerPage>
            <HeaderPage title="Strategy Overview" />
            <div className="flex lg:flex-row flex-col items-center lg:items-start bg-white h-[100%] gap-6 lg:gap-8">

                <RoadmapSidebar selectedKeyword={selectedKeyword} onKeywordSelect={setSelectedKeyword} />

                <div className="flex-1 px-2 sm:px-4 w-full lg:w-auto">
                    <ProgressMetrics />

                    <div className="bg-white rounded-b-lg border border-t-0 border-gray-200 p-2 sm:p-3 pb-6 sm:pb-10">

                        {selectedKeyword === "CPA Los Angeles" ? <IntegratedStrategy /> : <ShowDetails />
                        }
                    </div>
                </div>

            </div>
        </ContainerPage>
    )
}

export default Strategy