'use client'

import { useState, useTransition } from 'react'

export default function AdminBlogToggle({ id, isPublished: initial }: { id: number; isPublished: boolean }) {
  const [pub, setPub] = useState(initial)
  const [pending, start] = useTransition()

  function toggle() {
    start(async () => {
      const res = await fetch(`/api/admin/blog/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ isPublished: !pub }),
      })
      if (res.ok) setPub(v => !v)
    })
  }

  return (
    <button onClick={toggle} disabled={pending}
      className={`relative inline-flex h-5 w-10 items-center rounded-full transition-colors disabled:opacity-50 ${pub ? 'bg-green-500' : 'bg-gray-300'}`}>
      <span className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${pub ? 'translate-x-5' : 'translate-x-0.5'}`} />
    </button>
  )
}