import { SectionHeading } from "@/components/ui/section-heading"
import { DashboardStatsBlock } from "@/components/blocks/dashboard-stats-block"
import { ComponentContainer } from "@/components/ui/component-container"

export function DashboardStatsSection() {
  return (
    <section id="dashboard-stats" className="space-y-6">
      <SectionHeading
        title="Dashboard Stats"
        description="A collection of stat cards for displaying key metrics in dashboards."
      />

      <ComponentContainer>
        <DashboardStatsBlock />
      </ComponentContainer>

      <div className="space-y-4">
        <h2 className="text-xl font-medium">Usage Guidelines</h2>
        <div className="bg-muted/30 p-4 rounded-lg space-y-2">
          <ul className="list-disc pl-5 space-y-2">
            <li>
              <strong>Key Metrics:</strong> Use dashboard stats to highlight the most important metrics that users need
              to monitor.
            </li>
            <li>
              <strong>Visual Hierarchy:</strong> Arrange stats in order of importance, with the most critical metrics
              positioned first.
            </li>
            <li>
              <strong>Context:</strong> Include trend indicators or comparisons to provide context for the numbers.
            </li>
            <li>
              <strong>Clarity:</strong> Use clear, concise labels and appropriate formatting for numbers (e.g., currency
              symbols, abbreviations for large numbers).
            </li>
            <li>
              <strong>Responsiveness:</strong> Ensure stats display well on all device sizes, adjusting the grid layout
              as needed.
            </li>
            <li>
              <strong>Consistency:</strong> Maintain consistent styling across all stat cards for a cohesive dashboard
              experience.
            </li>
            <li>
              <strong>Accessibility:</strong> Ensure all information is accessible, including proper contrast and text
              alternatives.
            </li>
            <li>
              <strong>Interactivity:</strong> Consider adding hover states or click actions to provide additional
              information or navigation.
            </li>
          </ul>
        </div>
      </div>
    </section>
  )
}