'use client'

import { useState, useTransition } from 'react'

export default function AdminDealerToggle({ id, isActive: initial }: { id: number; isActive: boolean }) {
  const [active, setActive] = useState(initial)
  const [pending, start] = useTransition()

  function toggle() {
    start(async () => {
      const res = await fetch(`/api/admin/dealers/${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}
      title={active ? 'Pasife al' : 'Aktife al'}
      className={`relative inline-flex h-5 w-10 items-center rounded-full transition-colors disabled:opacity-50 ${active ? 'bg-green-500' : 'bg-gray-300'}`}
    >
      <span className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${active ? 'translate-x-5' : 'translate-x-0.5'}`} />
    </button>
  )
}