"use client"

import { useState } from "react"
import { InPlayHeader } from "@/components/betting/in-play-header"
import { QuickFilterBar } from "@/components/betting/quick-filter-bar"
import { SearchEvent } from "@/components/betting/search-event"
import { BetServices } from "@/components/betting/bet-services"
import { EventsList } from "@/components/betting/events-list"

export function InPlayPage() {
  const [activeFilter, setActiveFilter] = useState("All")
  const [searchQuery, setSearchQuery] = useState("")

  return (
    <div className="flex flex-col gap-3">
      <InPlayHeader />
      <QuickFilterBar active={activeFilter} onChange={setActiveFilter} />
      <SearchEvent value={searchQuery} onChange={setSearchQuery} />
      <BetServices />
      <EventsList />
    </div>
  )
}