import { AlertTriangle } from "lucide-react";
import { Button } from "@/components/ui/button";

interface AutotradeWarningBannerProps {
  visible: boolean;
  isStopping?: boolean;
  onStop: () => void;
}

export function AutotradeWarningBanner({
  visible,
  isStopping = false,
  onStop,
}: AutotradeWarningBannerProps) {
  if (!visible) return null;

  return (
    <div className="border-b border-red-300/60 bg-red-600/90 px-3 py-2 text-white shadow-[0_2px_10px_rgba(220,38,38,0.35)] sm:px-4">
      <div className="mx-auto flex w-full max-w-[1800px] items-center gap-3">
        <AlertTriangle className="h-4 w-4 shrink-0" />
        <p className="text-xs font-semibold sm:text-sm">
          자동매매 실행 중: 브라우저/탭 종료 또는 외부 페이지 이동 시 주문이 즉시 중지됩니다.
        </p>
        <Button
          type="button"
          variant="secondary"
          size="sm"
          className="ml-auto h-7 bg-white text-red-700 hover:bg-red-50"
          disabled={isStopping}
          onClick={onStop}
        >
          {isStopping ? "중지 중..." : "비상 중지"}
        </Button>
      </div>
    </div>
  );
}