"use client"

import { useState } from "react"

export function ReloadTicket() {
  const [code, setCode] = useState("")

  return (
    <div className="bg-transparent border-t border-border/20 pt-4 pb-2">
      <div className="px-1 text-center space-y-3">
        <h3 className="text-[12px] font-bold uppercase text-brand-primary">Reload Ticket</h3>
        <p className="text-[11px] text-white">Insert the code to load</p>
        <div className="flex gap-1">
          <input
            type="text"
            value={code}
            onChange={(e) => setCode(e.target.value)}
            className="flex-1 bg-brand-bg border border-border/40 px-2 py-2 text-[11px] text-white outline-none focus:border-brand-primary"
          />
          <button className="bg-brand-primary text-black px-2 py-1.5 flex items-center justify-center min-w-[32px] hover:bg-brand-primary-hover transition-colors">
            <svg viewBox="0 0 24 24" className="size-5 fill-current"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
          </button>
        </div>
      </div>
    </div>
  )
}