import { GraphArea } from '../components/Graph/GraphArea';
import { useLocation } from 'react-router-dom';

export function PlotsPage() {
 const location = useLocation();
 const selectedMetric =
  typeof (location.state as { selectedMetric?: unknown } | null)?.selectedMetric === 'string'
  ? ((location.state as { selectedMetric?: string }).selectedMetric ?? null)
  : null;

 return (
  <div className="pb-20">
   {/* Header */}
   <div className="mb-8">
    <h1 className="text-2xl font-semibold text-gray-900">Plots</h1>
    <p className="text-sm text-gray-500 mt-1">Visualize and compare your health data with plots</p>
   </div>

   {/* Main Graph Area */}
   <section>
    <GraphArea initialSelectedMetric={selectedMetric} />
   </section>
  </div>
 );
}
