import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import dayjs from "dayjs";

import InfoIconV4 from "@src/components/UI/Icon/Icons/InfoIconV4";
import Box from "@src/components/UI/Box";
import Text from "@src/components/UI/Text";
import Calendar from "./Calendar";

# Calendar

> A clickable UI element with active and hover states. Indicates to the user that it's clickable.

<CodeBlock title="Themed">
  <Calendar numMonths={2} themed />
</CodeBlock>

<CodeBlock>
  <Calendar numMonths={2} />
</CodeBlock>

## Configuration

<ConfigBlock of={Calendar} />

## Examples of Themed Calendar

<CodeBlock title="Single">
  <Calendar themed />
</CodeBlock>

<CodeBlock title="Range">
  <Calendar
    themed
    numMonths={2}
    value={[{ from: dayjs(), to: dayjs().add(7, "d") }]}
  />
</CodeBlock>

<CodeBlock title="Merging Ranges">
  <Calendar
    themed
    numMonths={2}
    mergeColor="#22AA22"
    value={[
      { from: dayjs(), to: dayjs().add(7, "d") },
      { from: dayjs().add(4, "d"), to: dayjs().add(16, "d") },
    ]}
  />
</CodeBlock>

<CodeBlock title="With tooltip">
  <Calendar
    numMonths={2}
    themed
    InfoCard=<Box
      backgroundColor="yellow.pastel"
      padding={8}
      width="100%"
      pl={16}
      alignItems="center"
    >
      <InfoIconV4 iconColor="yellow.dark" size="small" mr={8} />
      <Text variant="body.md" color="yellow.dark">
        Tooltip for test.
      </Text>
    </Box>
  />
</CodeBlock>

## Examples

<CodeBlock title="Single">
  <Calendar />
</CodeBlock>

<CodeBlock title="Multiple">
  <Calendar numMonths={2} />
</CodeBlock>

<CodeBlock title="Range">
  <Calendar
    numMonths={1}
    value={[{ from: dayjs(), to: dayjs().add(7, "d") }]}
  />
</CodeBlock>

<CodeBlock title="Multiple Ranges">
  <Calendar
    numMonths={1}
    value={[
      { from: dayjs(), to: dayjs().add(7, "d"), color: "#F00" },
      { from: dayjs().add(9, "d"), to: dayjs().add(16, "d") },
    ]}
  />
</CodeBlock>

<CodeBlock title="Merging Ranges">
  <Calendar
    numMonths={1}
    mergeColor="#22AA22"
    value={[
      { from: dayjs(), to: dayjs().add(7, "d"), color: "#F00" },
      { from: dayjs().add(4, "d"), to: dayjs().add(16, "d") },
    ]}
  />
</CodeBlock>