"use client"
import React from 'react'
import Sidebar from '../../components/Sidebar'
import { useAppSelector } from '../../hooks/hooks'

export default function ProfileLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const hideOptionNames = useAppSelector((state) => state.hideOption.hideOptionNames)

  return (
    <div className='flex bg-[var(--bg-primary)] min-h-screen overflow-x-hidden'>
      <div className='shrink-0'>
        <Sidebar />
      </div>

      <div
        className={`flex-1 flex flex-col items-center w-full bg-[var(--bg-primary)] transition-all duration-300 ${
          hideOptionNames ? "" : ""
        }`}
      >
        <div className="w-full max-w-[1200px] px-0 md:px-4 flex flex-col items-center">
          <div className="w-full">
            {children}
          </div>
        </div>
      </div>
    </div>
  )
}