import { SectionHeading } from "@/components/ui/section-heading"
import { ComponentContainer } from "@/components/ui/component-container"

export function TablesSection() {
  // Add a style block for the custom hover effect using the CSS variable
  const customHoverStyle = `
    .table-row-hover:hover {
      background-color: var(--background-secondary);
    }
  `

  return (
    <section id="tables" className="mb-12">
      <style dangerouslySetInnerHTML={{ __html: customHoverStyle }} />
      <SectionHeading title="Tables" description="Display tabular data in a structured format." />

      <ComponentContainer
        title="Basic Table"
        description="A simple table with headers and data rows."
        code={`<div className="relative w-full overflow-auto">
  <table className="w-full caption-bottom text-sm">
    <thead className="[&_tr]:border-b">
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Name</th>
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Email</th>
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Status</th>
      </tr>
    </thead>
    <tbody className="[&_tr:last-child]:border-0">
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <td className="p-4 align-middle">John Doe</td>
        <td className="p-4 align-middle">john@example.com</td>
        <td className="p-4 align-middle">Active</td>
      </tr>
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <td className="p-4 align-middle">Jane Smith</td>
        <td className="p-4 align-middle">jane@example.com</td>
        <td className="p-4 align-middle">Pending</td>
      </tr>
    </tbody>
  </table>
</div>

/* Custom CSS for hover effect */
.table-row-hover:hover {
  background-color: var(--background-secondary);
}`}
      >
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Name</th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Email</th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Status</th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <td className="p-4 align-middle">John Doe</td>
                <td className="p-4 align-middle">john@example.com</td>
                <td className="p-4 align-middle">Active</td>
              </tr>
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <td className="p-4 align-middle">Jane Smith</td>
                <td className="p-4 align-middle">jane@example.com</td>
                <td className="p-4 align-middle">Pending</td>
              </tr>
            </tbody>
          </table>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Table with Status Indicators"
        description="Table with visual status indicators for each row."
        code={`<div className="relative w-full overflow-auto">
  <table className="w-full caption-bottom text-sm">
    <thead className="[&_tr]:border-b">
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Name</th>
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Email</th>
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Status</th>
      </tr>
    </thead>
    <tbody className="[&_tr:last-child]:border-0">
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <td className="p-4 align-middle">John Doe</td>
        <td className="p-4 align-middle">john@example.com</td>
        <td className="p-4 align-middle">
          <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
            Active
          </span>
        </td>
      </tr>
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <td className="p-4 align-middle">Jane Smith</td>
        <td className="p-4 align-middle">jane@example.com</td>
        <td className="p-4 align-middle">
          <span className="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">
            Pending
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</div>`}
      >
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Name</th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Email</th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Status</th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <td className="p-4 align-middle">John Doe</td>
                <td className="p-4 align-middle">john@example.com</td>
                <td className="p-4 align-middle">
                  <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
                    Active
                  </span>
                </td>
              </tr>
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <td className="p-4 align-middle">Jane Smith</td>
                <td className="p-4 align-middle">jane@example.com</td>
                <td className="p-4 align-middle">
                  <span className="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">
                    Pending
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Table with Actions"
        description="Table with action buttons for each row."
        code={`<div className="relative w-full overflow-auto">
  <table className="w-full caption-bottom text-sm">
    <thead className="[&_tr]:border-b">
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Name</th>
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Email</th>
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Status</th>
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Actions</th>
      </tr>
    </thead>
    <tbody className="[&_tr:last-child]:border-0">
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <td className="p-4 align-middle">John Doe</td>
        <td className="p-4 align-middle">john@example.com</td>
        <td className="p-4 align-middle">
          <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
            Active
          </span>
        </td>
        <td className="p-4 align-middle">
          <button className="inline-flex items-center justify-center rounded-md text-xs font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 px-2.5 py-1">
            Edit
          </button>
        </td>
      </tr>
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <td className="p-4 align-middle">Jane Smith</td>
        <td className="p-4 align-middle">jane@example.com</td>
        <td className="p-4 align-middle">
          <span className="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">
            Pending
          </span>
        </td>
        <td className="p-4 align-middle">
          <button className="inline-flex items-center justify-center rounded-md text-xs font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 px-2.5 py-1">
            Edit
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>`}
      >
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Name</th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Email</th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Status</th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Actions</th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <td className="p-4 align-middle">John Doe</td>
                <td className="p-4 align-middle">john@example.com</td>
                <td className="p-4 align-middle">
                  <span className="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800">
                    Active
                  </span>
                </td>
                <td className="p-4 align-middle">
                  <button className="inline-flex items-center justify-center rounded-md text-xs font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 px-2.5 py-1">
                    Edit
                  </button>
                </td>
              </tr>
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <td className="p-4 align-middle">Jane Smith</td>
                <td className="p-4 align-middle">jane@example.com</td>
                <td className="p-4 align-middle">
                  <span className="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800">
                    Pending
                  </span>
                </td>
                <td className="p-4 align-middle">
                  <button className="inline-flex items-center justify-center rounded-md text-xs font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-8 px-2.5 py-1">
                    Edit
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </ComponentContainer>

      <ComponentContainer
        title="Striped Table"
        description="Table with alternating row colors for better readability."
        code={`<div className="relative w-full overflow-auto">
  <table className="w-full caption-bottom text-sm">
    <thead className="[&_tr]:border-b">
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Name</th>
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Email</th>
        <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Status</th>
      </tr>
    </thead>
    <tbody className="[&_tr:last-child]:border-0">
      <tr className="border-b transition-colors bg-muted/50 table-row-hover data-[state=selected]:bg-muted">
        <td className="p-4 align-middle">John Doe</td>
        <td className="p-4 align-middle">john@example.com</td>
        <td className="p-4 align-middle">Active</td>
      </tr>
      <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
        <td className="p-4 align-middle">Jane Smith</td>
        <td className="p-4 align-middle">jane@example.com</td>
        <td className="p-4 align-middle">Pending</td>
      </tr>
      <tr className="border-b transition-colors bg-muted/50 table-row-hover data-[state=selected]:bg-muted">
        <td className="p-4 align-middle">Bob Johnson</td>
        <td className="p-4 align-middle">bob@example.com</td>
        <td className="p-4 align-middle">Active</td>
      </tr>
    </tbody>
  </table>
</div>`}
      >
        <div className="relative w-full overflow-auto">
          <table className="w-full caption-bottom text-sm">
            <thead className="[&_tr]:border-b">
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Name</th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Email</th>
                <th className="h-12 px-4 text-left align-middle font-medium text-muted-foreground">Status</th>
              </tr>
            </thead>
            <tbody className="[&_tr:last-child]:border-0">
              <tr className="border-b transition-colors bg-muted/50 table-row-hover data-[state=selected]:bg-muted">
                <td className="p-4 align-middle">John Doe</td>
                <td className="p-4 align-middle">john@example.com</td>
                <td className="p-4 align-middle">Active</td>
              </tr>
              <tr className="border-b transition-colors table-row-hover data-[state=selected]:bg-muted">
                <td className="p-4 align-middle">Jane Smith</td>
                <td className="p-4 align-middle">jane@example.com</td>
                <td className="p-4 align-middle">Pending</td>
              </tr>
              <tr className="border-b transition-colors bg-muted/50 table-row-hover data-[state=selected]:bg-muted">
                <td className="p-4 align-middle">Bob Johnson</td>
                <td className="p-4 align-middle">bob@example.com</td>
                <td className="p-4 align-middle">Active</td>
              </tr>
            </tbody>
          </table>
        </div>
      </ComponentContainer>
    </section>
  )
}