import React from "react";
import { Box, Heading, Paragraph, SimpleTable } from "..";
import { Code } from "./Code";

export const Accessibility = ({
  description,
  keyboardInteractions = [],
}: {
  description?: React.ReactNode;
  keyboardInteractions?: {
    key: string;
    description: string;
  }[];
}) => {
  return (
    <Box className="mt-6">
      <Heading.H2>Accessibility</Heading.H2>
      {description && <Paragraph>{description}</Paragraph>}

      {keyboardInteractions.length > 0 && (
        <>
          <Heading.H3 className="mt-6">Keyboard interactions</Heading.H3>
          <SimpleTable className="text-bodySm mt-2">
            <SimpleTable.Head>
              <SimpleTable.Row>
                <SimpleTable.HeaderCell>Key</SimpleTable.HeaderCell>
                <SimpleTable.HeaderCell>Description</SimpleTable.HeaderCell>
              </SimpleTable.Row>
            </SimpleTable.Head>
            <SimpleTable.Body>
              {keyboardInteractions.map((item) => (
                <SimpleTable.Row className="border-b" key={item.key}>
                  <SimpleTable.Cell className="font-medium">
                    <Code className="mr-6">{item.key}</Code>
                  </SimpleTable.Cell>
                  <SimpleTable.Cell className="whitespace-normal">
                    <Paragraph>{item.description}</Paragraph>
                  </SimpleTable.Cell>
                </SimpleTable.Row>
              ))}
            </SimpleTable.Body>
          </SimpleTable>
        </>
      )}
    </Box>
  );
};