'use client';

import { AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';
import type { StackState } from '@/lib/visualizations/types';
import { StackElement } from '../primitives/stack-element';

interface StackViewProps {
  stack: StackState;
  className?: string;
}

export function StackView({ stack, className }: StackViewProps) {
  const hasElements = stack.elements.length > 0;

  return (
    <div className={cn('flex flex-col items-center', className)}>
      {stack.label && (
        <span className="mb-2 whitespace-nowrap text-sm font-medium text-[var(--muted-foreground)]">
          {stack.label}
        </span>
      )}

      <div className="relative flex min-h-[88px] flex-col-reverse items-center gap-1">
        {/* Empty state */}
        {!hasElements && (
          <div className="flex h-10 w-10 items-center justify-center rounded-lg border-2 border-dashed border-[var(--border)] text-xs text-[var(--muted-foreground)]">
            empty
          </div>
        )}

        {/* Stack elements - flex-col-reverse makes first element appear at bottom */}
        <AnimatePresence mode="popLayout">
          {stack.elements.map((element, index) => (
            <StackElement
              key={element.id}
              element={element}
              isTop={index === stack.elements.length - 1}
            />
          ))}
        </AnimatePresence>
      </div>

      {/* Bottom indicator */}
      <div className="mt-1 h-1 w-12 rounded-full bg-[var(--border)]" />
    </div>
  );
}
