'use client';

import { Box } from '@/ui/Box';
import { ReactNode } from 'react';

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

export function AppShellBar({ position, children, sidebarOffset = true }: AppShellBarProps) {
  const isTop = position === 'top';
  
  return (
    <Box
      as={isTop ? 'header' : 'footer'}
      className={`
        fixed ${isTop ? 'top-0' : 'bottom-0'} right-0 z-40
        h-14
        bg-base-black/70 backdrop-blur-xl
        border-${isTop ? 'b' : 't'} border-outline-steel
        flex items-center justify-between px-6
        transition-all duration-200
      `}
      // Use style for responsive left offset to ensure it works
      // We use a CSS variable or calc if possible, but here we rely on Tailwind classes via className if we could
      // But since we need responsive logic that matches Layout, we'll use the Box props
      left={sidebarOffset ? { base: 0, lg: 64 } : 0}
    >
      {children}
    </Box>
  );
}