import React from "react";
import { Toaster } from "react-hot-toast";
import { Unstyled } from "@storybook/blocks";
import {
  Box,
  Heading,
  Text,
  Stack,
  Link,
  Divider,
  ORIENTATION,
  Icon,
  ICON_TYPE,
} from "..";

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

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

export const ComponentHeading = ({
  componentName,
  description,
  sourcePath,
  waiAriaPath,
  hideDemosLink = false,
  figmaLink,
}: ComponentHeadingProps) => {
  return (
    <>
      <Unstyled>
        <Toaster />
      </Unstyled>
      <Box className="mb-4">
        <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="#api" target="_self">
            API
          </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
                <Icon
                  icon={ICON_TYPE.EXTERNAL_LINK_ALT}
                  className="!text-[10px] !ml-1"
                />
              </Link>
            </>
          )}
          {figmaLink && (
            <>
              <Divider direction={ORIENTATION.VERTICAL} className="h-4" />
              <Link href={figmaLink} target="_blank">
                Figma
                <Icon
                  icon={ICON_TYPE.EXTERNAL_LINK_ALT}
                  className="!text-[10px] !ml-1"
                />
              </Link>
            </>
          )}
          {waiAriaPath && (
            <>
              <Divider direction={ORIENTATION.VERTICAL} className="h-4" />
              <Link href={waiAriaPath} target="_blank">
                WAI-ARIA Pattern
                <Icon
                  icon={ICON_TYPE.EXTERNAL_LINK_ALT}
                  className="!text-[10px] !ml-1"
                />
              </Link>
            </>
          )}
        </Stack>
      </Box>
    </>
  );
};