import React from "react";
import {
  Box,
  Heading,
  Text,
  Stack,
  Link,
  IntegrationLogo,
  Divider,
  ORIENTATION,
} from "..";

interface ComponentHeadingProps {
  componentName: string;
  description: string;
  sourcePath?: string;
  waiAriaPath?: string;
  hideDemosLink?: boolean;
}

// change this when changing from master/alpha/beta branches
const CURRENT_BRANCH = "master";

export const ComponentHeading = ({
  componentName,
  description,
  sourcePath,
  waiAriaPath,
  hideDemosLink = false,
}: ComponentHeadingProps) => {
  return (
    <Box>
      <Heading.H1 style={{ fontSize: "36px" }} className="mb-1">
        {componentName}
      </Heading.H1>
      <Text style={{ fontSize: "20px" }} className="mb-3">
        {description}
      </Text>
      <Stack spacing={2}>
        <Link href="#props" target="_self">
          Props
        </Link>
        {!hideDemosLink && (
          <>
            <Divider direction={ORIENTATION.VERTICAL} className="h-4" />
            <Link href="#demos" target="_self">
              Demos
            </Link>
          </>
        )}
        {sourcePath && (
          <>
            <Divider direction={ORIENTATION.VERTICAL} className="h-4" />
            <Link
              href={`https://github.com/aptible/arrow-ds/tree/${CURRENT_BRANCH}/${sourcePath}`}
              target="_blank"
              className="inline-flex items-center"
            >
              Source
              <IntegrationLogo
                logo="github"
                color="currentColor"
                className="ml-1 inline-block"
                size={18}
              />
            </Link>
          </>
        )}
        {waiAriaPath && (
          <>
            <Divider direction={ORIENTATION.VERTICAL} className="h-4" />
            <Link href={waiAriaPath} target="_blank">
              WAI-ARIA Pattern
            </Link>
          </>
        )}
      </Stack>
    </Box>
  );
};