import { FireIcon } from "@heroicons/react/20/solid";
import { cn } from "~/utils/cn";

function ColdStartIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M12.0016 2C12.7127 2 13.2872 2.55859 13.2872 3.25V4.42578L13.8898 3.83984C14.2675 3.47266 14.8782 3.47266 15.2518 3.83984C15.6255 4.20703 15.6295 4.80078 15.2518 5.16406L13.2832 7.07812V9.82422L15.75 8.42578L16.4611 5.84375C16.5977 5.34375 17.1281 5.04688 17.6423 5.17969C18.1566 5.3125 18.4619 5.82813 18.3253 6.32813L18.1164 7.08203L19.0645 6.54297C19.6792 6.19531 20.4667 6.39844 20.8243 6.99219C21.1818 7.58594 20.9769 8.35547 20.3622 8.70313L19.3458 9.28125L20.2176 9.50781C20.7319 9.64062 21.0372 10.1563 20.9006 10.6563C20.764 11.1563 20.2337 11.4531 19.7194 11.3203L16.9995 10.6133L14.5528 12L16.9995 13.3867L19.7194 12.6797C20.2337 12.5469 20.764 12.8437 20.9006 13.3437C21.0372 13.8437 20.7319 14.3594 20.2176 14.4922L19.3458 14.7188L20.3622 15.2969C20.9769 15.6445 21.1818 16.4102 20.8243 17.0078C20.4667 17.6055 19.6792 17.8047 19.0645 17.457L18.1164 16.918L18.3253 17.6719C18.4619 18.1719 18.1566 18.6875 17.6423 18.8203C17.1281 18.9531 16.5977 18.6563 16.4611 18.1563L15.75 15.5742L13.2872 14.1758V16.9219L15.2558 18.8359C15.6335 19.2031 15.6335 19.7969 15.2558 20.1602C14.8782 20.5234 14.2675 20.5273 13.8939 20.1602L13.2912 19.5742V20.75C13.2912 21.4414 12.7167 22 12.0056 22C11.2945 22 10.7199 21.4414 10.7199 20.75V19.5742L10.1173 20.1602C9.73964 20.5273 9.12896 20.5273 8.75532 20.1602C8.38169 19.793 8.37767 19.1992 8.75532 18.8359L10.724 16.9219V14.1758L8.25714 15.5742L7.54602 18.1563C7.40942 18.6563 6.87909 18.9531 6.36484 18.8203C5.85058 18.6875 5.54524 18.1719 5.68184 17.6719L5.89076 16.918L4.93456 17.4531C4.31987 17.8008 3.53241 17.5977 3.17485 17.0039C2.81728 16.4102 3.02619 15.6406 3.63687 15.293L4.65333 14.7148L3.78151 14.4883C3.26725 14.3555 2.96191 13.8398 3.09851 13.3398C3.23511 12.8398 3.76544 12.543 4.27969 12.6758L6.99962 13.3828L9.45037 12L7.00364 10.6133L4.28371 11.3203C3.76945 11.4531 3.23913 11.1563 3.10253 10.6563C2.96593 10.1563 3.27127 9.64062 3.78552 9.50781L4.65735 9.28125L3.64089 8.70313C3.02619 8.35547 2.82129 7.58984 3.17886 6.99609C3.53643 6.40234 4.32389 6.19922 4.93858 6.54688L5.88674 7.08594L5.67783 6.33203C5.54123 5.83203 5.84657 5.31641 6.36082 5.18359C6.87508 5.05078 7.4054 5.34766 7.542 5.84766L8.25312 8.42969L10.7159 9.82422V7.07812L8.74729 5.16406C8.36963 4.79688 8.36963 4.20312 8.74729 3.83984C9.12495 3.47656 9.73562 3.47266 10.1093 3.83984L10.7119 4.42578L10.7159 3.25C10.7159 2.55859 11.2904 2 12.0016 2Z"
        fill="currentColor"
      />
    </svg>
  );
}

export function WarmStartIcon({
  isWarmStart,
  className,
}: {
  isWarmStart: boolean;
  className?: string;
}) {
  if (isWarmStart) {
    return <FireIcon className={cn("text-orange-400", className)} />;
  }
  return <ColdStartIcon className={cn("text-blue-400", className)} />;
}
