"use client"

import { Send, Save } from "lucide-react"

interface SubmitButtonProps {
  isLoading: boolean
  status?: "draft" | "published"
}

export function SubmitButton({ isLoading, status = "draft" }: SubmitButtonProps) {
  const isPublish = status === "published"

  return (
    <button
      type="submit"
      disabled={isLoading}
      className="flex items-center gap-2 px-6 py-2.5 rounded-xl text-white text-sm font-semibold font-sans transition-all duration-150 hover:brightness-105 active:scale-[0.98] disabled:opacity-60 disabled:cursor-not-allowed disabled:active:scale-100"
      style={{
        background: isPublish ? "var(--brand-green)" : "var(--brand-navy)",
        boxShadow: isPublish
          ? "0 2px 8px rgba(43,182,115,0.3)"
          : "0 2px 8px rgba(29,45,104,0.3)",
      }}
    >
      {isLoading ? (
        <>
          <div
            className="w-4 h-4 rounded-full border-2 border-t-transparent animate-spin"
            style={{ borderColor: "rgba(255,255,255,0.8) transparent rgba(255,255,255,0.8) rgba(255,255,255,0.8)" }}
            aria-hidden="true"
          />
          {isPublish ? "Publishing..." : "Saving..."}
        </>
      ) : (
        <>
          {isPublish ? (
            <Send className="w-4 h-4" aria-hidden="true" />
          ) : (
            <Save className="w-4 h-4" aria-hidden="true" />
          )}
          {isPublish ? "Publish Article" : "Save as Draft"}
        </>
      )}
    </button>
  )
}