'use client';

import { AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';
import type { QueueState } from '@/lib/visualizations/types';
import { QueueElement } from '../primitives/queue-element';

interface QueueViewProps {
  queue: QueueState;
  className?: string;
}

export function QueueView({ queue, className }: QueueViewProps) {
  const hasElements = queue.elements.length > 0;

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

      <div className="relative flex min-w-[88px] flex-row 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>
        )}

        {/* Queue elements - horizontal row, front on left, rear on right */}
        <AnimatePresence mode="popLayout">
          {queue.elements.map((element, index) => (
            <QueueElement
              key={element.id}
              element={element}
              isFront={index === 0}
              isRear={index === queue.elements.length - 1 && queue.elements.length > 1}
            />
          ))}
        </AnimatePresence>
      </div>

      {/* Direction indicator */}
      <div className="mt-4 flex items-center gap-2 text-[10px] text-[var(--muted-foreground)]">
        <span>dequeue</span>
        <span>←</span>
        <span className="w-8 border-t border-dashed border-[var(--border)]" />
        <span>→</span>
        <span>enqueue</span>
      </div>
    </div>
  );
}