Weight and BMI Tracking Widget

import WeightWidget from "@/components/ui/weight-and-bmi-tracking-widget";

export default function DemoOne() {
  // Custom dataset example
  const customMetricDataSets: GraphData[] = [
    {
      data: [65, 66, 64, 67, 65, 63, 64, 66, 65, 64, 63, 65, 66, 64, 65],
      threshold: 65,
      mode: 'weight',
      name: 'Weight (kg)',
      ariaLabel: 'Weight chart in kilograms. Threshold is 65kg. 15 bars.'
    },
    {
      data: [22.1, 22.4, 21.7, 22.7, 22.1, 21.4, 21.7, 22.4, 22.1, 21.7, 21.4, 22.1, 22.4, 21.7, 22.1],
      threshold: 22.0,
      mode: 'bmi',
      name: 'BMI',
      ariaLabel: 'BMI chart. Threshold is 22.0. 15 bars.'
    }
  ];

  return (
    <div className="min-h-screen w-full bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-6 transition-colors duration-300">
      <div className="space-y-8 w-full max-w-2xl">
        {/* Default US system widget */}
        <WeightWidget />
        
        {/* Custom metric system widget - uncomment to use */}
        {/* 
        <WeightWidget
          system="metric"
          height={175} // cm
          weights={[65, 66, 64, 67, 65, 63, 64, 66, 65, 64]}
          weightThreshold={65}
          locale="en-US"
        />
        */}
        
        {/* Custom dataset widget - uncomment to use */}
        {/*
        <WeightWidget
          customDataSets={customMetricDataSets}
          locale="en-US"
          className="border-2 border-blue-200"
        />
        */}
      </div>
    </div>
  );
};