import React from "react";
import { Heading } from "../../Heading";
import { Paragraph } from "../../Paragraph";
import { Select } from "../../Select";

export const ExampleModalContent = () => (
  <>
    <Heading.H3>This is the Modal component</Heading.H3>
    <Paragraph>
      Duis vulputate dui quis commodo cursus. In fermentum efficitur vehicula.
      Integer nec felis varius, ultrices erat ac, volutpat lectus. Proin eu
      dolor sed magna accumsan blandit a ac nisl. Nulla eros ante, blandit et
      suscipit id, ultrices vitae ligula. Vestibulum egestas orci nec orci
      finibus varius. Nullam sit amet ex vel arcu fermentum mattis et in risus.
      Integer blandit semper consequat. Aenean lectus quam, tristique convallis
      est varius, commodo aliquam ipsum.
    </Paragraph>
    <Select
      placeholder="Favorite ice cream?"
      options={[
        { value: "chocolate", label: "Chocolate" },
        { value: "strawberry", label: "Strawberry" },
        { value: "vanilla", label: "Vanilla" },
      ]}
      menuInPortal
    />
  </>
);