// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { makeResetStyles } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";
import * as React from 'react';

const useDivWithWidthClassName = makeResetStyles({
    width: '200px',
});

export const AsSpan = (): JSXElement => (<div className={useDivWithWidthClassName()}>
    The following link renders as a span.{' '}
    <Link as="span" inline onClick={() => alert('Link rendered as span')}>
      Links that render as a span wrap correctly between lines when their content is very long
    </Link>
    . This is because they behave as regular inline elements.
  </div>);

export default AsSpan;