'use client';

import { Box } from '@/ui/Box';
import { ReactNode } from 'react';
import { useSidebar } from '@/components/layout/SidebarContext';

interface AppShellBarProps {
  position: 'top' | 'bottom';
  children: ReactNode;
  sidebarOffset?: boolean;
}

export function AppShellBar({ position, children, sidebarOffset = true }: AppShellBarProps) {
  const isTop = position === 'top';
  const { isCollapsed } = useSidebar();
  
  const leftClass = sidebarOffset 
    ? (isCollapsed ? 'lg:left-20' : 'lg:left-64') 
    : 'left-0';

  return (
    <Box
      as={isTop ? 'header' : 'footer'}
      className={`
        fixed ${isTop ? 'top-0' : 'bottom-0'} right-0 z-40
        h-14
        bg-base-black/80 backdrop-blur-xl
        ${isTop ? 'border-b' : 'border-t'} border-white/10
        flex items-center justify-between px-6
        transition-all duration-300 ease-in-out
        left-0 ${leftClass}
      `}
    >
      {children}
    </Box>
  );
}