"use client"

import { BedPressureHeader } from "./bed-pressure/BedPressureHeader"
import { StatsCards } from "./bed-pressure/StatsCards"
import { BedVisualization } from "./bed-pressure/BedVisualization"
import { AlertsPanel } from "./bed-pressure/AlertsPanel"
import { SensorDetailModal } from "./bed-pressure/SensorDetailModal"
import { useBedPressureData } from "@/hooks/useBedPressureData"

export default function Component() {
  // Initialize data fetching
  useBedPressureData()

  return (
    <div className="min-h-screen bg-gray-50 p-6">
      <div className="max-w-7xl mx-auto space-y-6">
        {/* Header */}
        <BedPressureHeader />

        {/* Stats Cards */}
        <StatsCards />

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
          {/* Bed Visualization */}
          <div className="lg:col-span-2">
            <BedVisualization />
          </div>

          {/* Alerts Panel */}
          <div className="space-y-6">
            <AlertsPanel />
          </div>
        </div>

        {/* Sensor Detail Modal */}
        <SensorDetailModal />
      </div>
    </div>
  )
}