import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Activity, Pause, Play } from "lucide-react"
import { useBedPressureStore } from "@/stores/bedPressureStore"

export function BedPressureHeader() {
  const { isMonitoring, setIsMonitoring } = useBedPressureStore()

  return (
    <div className="flex items-center justify-between">
      <div className="flex items-center gap-4">
        <div className="flex items-center gap-2">
          <Activity className="w-8 h-8 text-blue-600" />
          <h1 className="text-3xl font-bold text-gray-900">Bed Pressure Monitor</h1>
        </div>
        <Badge variant={isMonitoring ? "default" : "secondary"} className="px-3 py-1">
          {isMonitoring ? "Live" : "Paused"}
        </Badge>
      </div>

      <div className="flex items-center gap-2">
        <Button variant="outline" size="sm" onClick={() => setIsMonitoring(!isMonitoring)}>
          {isMonitoring ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
          {isMonitoring ? "Pause" : "Resume"}
        </Button>
      </div>
    </div>
  )
}