import { SectionHeading } from "@/components/ui/section-heading"
import { DataTableBlock } from "@/components/blocks/data-table-block"
import { ComponentContainer } from "@/components/ui/component-container"

export function DataTableSection() {
  return (
    <section id="data-table" className="space-y-6">
      <SectionHeading
        title="Data Table"
        description="Interactive data table with sorting, filtering, and row actions."
      />

      <ComponentContainer>
        <DataTableBlock />
      </ComponentContainer>

      <div className="space-y-4">
        <h3 className="text-lg font-medium">Usage Guidelines</h3>
        <div className="bg-muted/30 p-4 rounded-lg space-y-2">
          <ul className="list-disc pl-5 space-y-2">
            <li>
              <strong>Data Organization:</strong> Use tables to organize and display structured data that benefits from
              column-based comparison.
            </li>
            <li>
              <strong>Sorting & Filtering:</strong> Implement sorting and filtering capabilities for tables with large
              datasets to help users find information quickly.
            </li>
            <li>
              <strong>Pagination:</strong> For large datasets, implement pagination to improve performance and reduce
              cognitive load.
            </li>
            <li>
              <strong>Row Actions:</strong> Provide contextual actions for each row using dropdown menus to keep the
              interface clean.
            </li>
            <li>
              <strong>Status Indicators:</strong> Use visual indicators like badges with appropriate colors to
              communicate status information.
            </li>
            <li>
              <strong>Responsive Design:</strong> Ensure tables adapt to different screen sizes, possibly by allowing
              horizontal scrolling or stacking on mobile.
            </li>
            <li>
              <strong>Empty States:</strong> Design appropriate empty states when no data is available or when filters
              return no results.
            </li>
            <li>
              <strong>Accessibility:</strong> Maintain proper table semantics and ensure all interactive elements are
              keyboard accessible.
            </li>
          </ul>
        </div>
      </div>
    </section>
  )
}