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

export default function HashtagLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const hideOptionNames = useAppSelector((state) => state.hideOption.hideOptionNames);
  
  return (
    <div className='md:flex'>
      <div className='left-0'>
        <Sidebar />
      </div>

      <div className={`min-h-screen w-[100%] bg-[var(--bg-primary)] ${hideOptionNames ? "" : "xl:pl-[300px]"}`}>
        <div className='lg:mx-4 md:mx-4 sm:mx-4 mx-0 md:pl-[90px] lg:pl-[0px]'>
          {children}
        </div>
      </div>
    </div>
  );
}