import { ReactNode } from 'react';
import { Box } from '../Box';

// --- Shell Sidebar ---

interface ShellSidebarProps {
  children: ReactNode;
  header?: ReactNode;
  footer?: ReactNode;
  collapsed?: boolean;
  width?: string | number;
  collapsedWidth?: string | number;
}

export function ShellSidebar({ 
  children, 
  header, 
  footer, 
  collapsed = false,
  width = '16rem',
  collapsedWidth = '5rem'
}: ShellSidebarProps) {
  return (
    <Box 
      as="aside"
      display="flex" 
      flexDirection="col" 
      height="full" 
      className="bg-base-black border-r border-white/10 relative transition-all duration-300 ease-in-out"
      style={{ width: collapsed ? collapsedWidth : width }}
    >
      {header && (
        <Box p={6} pb={8} display="flex" alignItems="center" justifyContent={collapsed ? 'center' : 'start'}>
          {header}
        </Box>
      )}

      <Box flex={1} px={collapsed ? 2 : 4} className="overflow-y-auto scrollbar-hide transition-all duration-300 flex flex-col">
        {children}
      </Box>

      {footer && (
        <Box className="h-14 flex items-center px-4 border-t border-white/10">
          {footer}
        </Box>
      )}
    </Box>
  );
}

// --- Shell Header ---

interface ShellHeaderProps {
  children: ReactNode;
  collapsed?: boolean;
}

export function ShellHeader({ children, collapsed = false }: ShellHeaderProps) {
  return (
    <Box
      as="header"
      className={`
        fixed top-0 right-0 z-40
        h-14
        bg-base-black/80 backdrop-blur-xl
        border-b border-white/10
        flex items-center justify-between px-6
        transition-all duration-300 ease-in-out
        left-0 ${collapsed ? 'lg:left-20' : 'lg:left-64'}
      `}
    >
      {children}
    </Box>
  );
}

// --- Shell Footer ---

interface ShellFooterProps {
  children: ReactNode;
  collapsed?: boolean;
}

export function ShellFooter({ children, collapsed = false }: ShellFooterProps) {
  return (
    <Box
      as="footer"
      className={`
        fixed bottom-0 right-0 z-40
        h-14
        bg-base-black/80 backdrop-blur-xl
        border-t border-white/10
        flex items-center justify-between px-6
        transition-all duration-300 ease-in-out
        left-0 ${collapsed ? 'lg:left-20' : 'lg:left-64'}
      `}
    >
      {children}
    </Box>
  );
}