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

interface ToolbarProps {
  children: ReactNode;
  minimized?: boolean;
  bottom?: number | string;
}

export function Toolbar({ children, minimized = false, bottom = '2rem' }: ToolbarProps) {
  if (minimized) {
    return (
      <Stack 
        position="fixed" 
        right={4} 
        zIndex={1000}
        style={{ bottom }}
      >
        {children}
      </Stack>
    );
  }

  return (
    <Stack
      position="fixed"
      right={4}
      zIndex={1000}
      width="min(420px, calc(100vw - 2rem))"
      maxHeight="calc(100vh - 2rem)"
      overflow="auto"
      border={true}
      borderColor="var(--ui-color-border-default)"
      rounded="xl"
      bg="rgba(20, 22, 25, 0.92)"
      padding={3}
      style={{
        bottom,
        boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
        backdropFilter: 'blur(12px)',
        WebkitBackdropFilter: 'blur(12px)',
      }}
      gap={4}
    >
      {children}
    </Stack>
  );
}