import { cn } from '@/lib/utils';

export const InvalidStepIcon = ({ className }: { className: string }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className={cn(
        'stroke-1 dark:stroke-amber-900 stroke-amber-500 ',
        className,
      )}
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <circle
        cx="8.08325"
        cy="8.26868"
        r="7.5"
        className="dark:fill-amber-950 fill-amber-50 "
      ></circle>
      <path
        d="M8.08325 3.69368C7.86445 3.69368 7.65461 3.7806 7.49989 3.93531C7.34517 4.09003 7.25825 4.29987 7.25825 4.51868V8.51868C7.25825 8.73748 7.34517 8.94732 7.49989 9.10204C7.65461 9.25676 7.86445 9.34368 8.08325 9.34368C8.30206 9.34368 8.5119 9.25676 8.66662 9.10204C8.82133 8.94732 8.90825 8.73748 8.90825 8.51868V4.51868C8.90825 4.29987 8.82133 4.09003 8.66662 3.93531C8.5119 3.7806 8.30206 3.69368 8.08325 3.69368ZM8.90825 12.0187C8.90825 11.563 8.53889 11.1937 8.08325 11.1937C7.62762 11.1937 7.25825 11.563 7.25825 12.0187C7.25825 12.4743 7.62762 12.8437 8.08325 12.8437C8.53889 12.8437 8.90825 12.4743 8.90825 12.0187Z"
        className="dark:fill-amber-600 fill-amber-700"
        strokeWidth="0.4"
      ></path>
    </svg>
  );
};