'use client'

import { useState, useTransition } from 'react'

interface Props {
  id: number
  isActive: boolean
}

export default function AdminProductToggle({ id, isActive: initial }: Props) {
  const [active, setActive] = useState(initial)
  const [pending, startTransition] = useTransition()

  function toggle() {
    startTransition(async () => {
      const res = await fetch(`/api/admin/products/${id}`, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ isActive: !active }),
      })
      if (res.ok) setActive((v) => !v)
    })
  }

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