"use client";

export default function AlertWarning() {
  return (
    <div className="space-y-4 p-6">
      {/* Alert 1 */}
      <div className="rounded-xl border border-[#F79009] bg-[#FFFAEB] p-4 dark:border-[#F79009]/30 dark:bg-[#F79009]/15">
        <div className="flex items-start gap-3">
          <div className="-mt-0.5 text-[#F79009] dark:text-[#FDB022]">
            <svg
              className="fill-current"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z"
                fill="#F79009"
              />
            </svg>
          </div>

          <div>
            <h4 className="mb-1 text-sm font-semibold text-[#1D2939] dark:text-[#FFFFFF]/90">
              Warning Message
            </h4>
            <p className="text-sm text-[#667085] dark:text-[#98A2B3]">
              You can insert a description for the message here. The text
              relates to the action that has been performed.
            </p>
            <a
              href="#"
              className="mt-3 inline-block text-sm font-medium text-[#667085] underline dark:text-[#98A2B3]"
            >
              Learn more
            </a>
          </div>
        </div>
      </div>

      {/* Alert 2 */}
      <div className="rounded-xl border border-[#F79009] bg-[#FFFAEB] p-4 dark:border-[#F79009]/30 dark:bg-[#F79009]/15">
        <div className="flex items-start gap-3">
          <div className="-mt-0.5 text-[#F79009] dark:text-[#FDB022]">
            <svg
              className="fill-current"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                fillRule="evenodd"
                clipRule="evenodd"
                d="M3.6501 12.0001C3.6501 7.38852 7.38852 3.6501 12.0001 3.6501C16.6117 3.6501 20.3501 7.38852 20.3501 12.0001C20.3501 16.6117 16.6117 20.3501 12.0001 20.3501C7.38852 20.3501 3.6501 16.6117 3.6501 12.0001ZM12.0001 1.8501C6.39441 1.8501 1.8501 6.39441 1.8501 12.0001C1.8501 17.6058 6.39441 22.1501 12.0001 22.1501C17.6058 22.1501 22.1501 17.6058 22.1501 12.0001C22.1501 6.39441 17.6058 1.8501 12.0001 1.8501ZM10.9992 7.52517C10.9992 8.07746 11.4469 8.52517 11.9992 8.52517H12.0002C12.5525 8.52517 13.0002 8.07746 13.0002 7.52517C13.0002 6.97289 12.5525 6.52517 12.0002 6.52517H11.9992C11.4469 6.52517 10.9992 6.97289 10.9992 7.52517ZM12.0002 17.3715C11.586 17.3715 11.2502 17.0357 11.2502 16.6215V10.945C11.2502 10.5308 11.586 10.195 12.0002 10.195C12.4144 10.195 12.7502 10.5308 12.7502 10.945V16.6215C12.7502 17.0357 12.4144 17.3715 12.0002 17.3715Z"
                fill="#F79009"
              />
            </svg>
          </div>

          <div>
            <h4 className="mb-1 text-sm font-semibold text-[#1D2939] dark:text-[#FFFFFF]/90">
              Warning Message
            </h4>
            <p className="text-sm text-[#667085] dark:text-[#98A2B3]">
              You can insert a description for the message here. The text
              relates to the action that has been performed.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}