'use client';

/**
 * 완료 토스트/뱃지 컴포넌트
 *
 * 검은색 라운드 배지, 상단 중앙 표시
 * 3초 후 자동 fade out
 */

import { CheckCircle2 } from 'lucide-react';
import type { CompletionToastInfo } from './types';

interface CompletionToastProps {
  info: CompletionToastInfo;
}

export function CompletionToast({ info }: CompletionToastProps) {
  return (
    <div className="fixed top-4 left-1/2 -translate-x-1/2 z-50 animate-in fade-in slide-in-from-top-2 duration-300">
      <div className="bg-gray-900 text-white px-6 py-3 rounded-full shadow-lg flex items-center gap-2">
        <CheckCircle2 className="h-5 w-5 text-green-400" />
        <span className="font-medium">
          {info.orderNo} 완료! ({info.quantity}EA)
        </span>
      </div>
    </div>
  );
}