import React from "react";
import { Page } from "@nimbus-ds/patterns";
import {
  IconButton,
  Button,
  Tag,
  Alert,
  Box,
  Icon,
  Text,
} from "@nimbus-ds/components";
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  ChevronDownIcon,
  DownloadIcon,
  PlusCircleIcon,
} from "@nimbus-ds/icons";

const Example: React.FC = () => {
  const headerButtons = (
    <>
      <IconButton source={<ChevronLeftIcon />} size="2rem" />
      <IconButton source={<ChevronRightIcon />} size="2rem" />
      <Button>
        Mis aplicaciones
        <Icon source={<ChevronDownIcon />} />
      </Button>
      <Button>
        Exportar lista
        <Icon source={<DownloadIcon />} />
      </Button>
      <Button appearance="primary">
        <Icon color="neutral-background" source={<PlusCircleIcon />} />
        Agregar orden de compra
      </Button>
    </>
  );

  return (
    <Page>
      <Page.Header
        title="Page title"
        subtitle="Page subtitle"
        buttonStack={headerButtons}
      >
        <Box display="flex" gap="2">
          <Tag appearance="primary">Example tag</Tag>
          <Tag>Example tag</Tag>
        </Box>
        <Alert appearance="warning" title="Example alert">
          This is an example Alert component inside the Page Header.
        </Alert>
      </Page.Header>
      <Page.Body>
        <Box
          backgroundColor="primary-surface"
          borderColor="primary-interactive"
          borderStyle="dashed"
          borderWidth="1"
          borderRadius="2"
          width="100%"
          height="500px"
          display="flex"
          alignItems="center"
          justifyContent="center"
        >
          <Text fontSize="base" color="primary-interactive">
            Body content
          </Text>
        </Box>
      </Page.Body>
    </Page>
  );
};

export default Example;