import { useRouter } from 'vue-router'

export default function AiIcon() {
  const router = useRouter()

  return (
    <button
      type="button"
      aria-label="跳转到 AI 页面"
      class="fixed bottom-20 right-10 z-50 inline-flex items-center justify-center rounded-2xl p-2.5 cursor-pointer bg-white shadow-lg shadow-indigo-500/20 ring-1 ring-slate-200/90 hover:shadow-xl hover:shadow-indigo-500/25 hover:ring-indigo-200/80 hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.98] transition-all duration-200"
      onClick={() => router.push('/ai')}
    >
      <div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-indigo-500 to-violet-500 shadow-lg shadow-indigo-200/40 flex items-center justify-center">
        <span class="text-white font-bold">AI</span>
      </div>
    </button>
  )
}
