type Props = {
  rolling: boolean
  disabled?: boolean
  onClick: () => void
}

function DiceIcon({ rolling }: { rolling: boolean }) {
  return (
    <svg
      className={`hx-copy-dice-icon${rolling ? ' hx-copy-dice-icon--rolling' : ''}`}
      viewBox="0 0 32 32"
      width="28"
      height="28"
      aria-hidden
    >
      <rect
        x="4"
        y="4"
        width="24"
        height="24"
        rx="5"
        fill="var(--hx-brand-soft)"
        stroke="currentColor"
        strokeWidth="1.75"
      />
      <circle cx="10" cy="10" r="2" fill="currentColor" />
      <circle cx="22" cy="10" r="2" fill="currentColor" />
      <circle cx="16" cy="16" r="2" fill="currentColor" />
      <circle cx="10" cy="22" r="2" fill="currentColor" />
      <circle cx="22" cy="22" r="2" fill="currentColor" />
    </svg>
  )
}

export function CopyMissionDiceButton({ rolling, disabled, onClick }: Props) {
  return (
    <button
      type="button"
      className={`hx-copy-dice-btn${rolling ? ' hx-copy-dice-btn--rolling' : ''}`}
      onClick={onClick}
      disabled={disabled || rolling}
      title="骰靈感：有搜尋 key 會參考網路趨勢，否則由 LLM 依人設推測並填任務名稱、種子關鍵字與 Brief"
      aria-label="骰靈感"
      data-islander-label="骰靈感"
    >
      <DiceIcon rolling={rolling} />
      <span className="hx-copy-dice-btn__label">{rolling ? '靈感轉動中…' : '骰靈感'}</span>
    </button>
  )
}