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

import type { JSXElement } from "@coreai-ds/react-components";
import { makeStyles } from "@coreai-ds/react-components";
import { InteractionTag } from "@coreai-ds/react-components";
import { Popover } from "@coreai-ds/react-components";
import { PopoverTrigger } from "@coreai-ds/react-components";
import { InteractionTagPrimary } from "@coreai-ds/react-components";
import { PopoverSurface } from "@coreai-ds/react-components";
import { Link } from "@coreai-ds/react-components";
import { Tooltip } from "@coreai-ds/react-components";
import { InteractionTagSecondary } from "@coreai-ds/react-components";
import * as React from 'react';

const useStyles = makeStyles({
    popover: {
        width: '360px',
        maxWidth: '100%',
        height: 'fit-content',
    },
});

export const HasPrimaryAction = (): JSXElement => {
    const styles = useStyles();
    return (<InteractionTag>
      <Popover trapFocus>
        <PopoverTrigger>
          <InteractionTagPrimary hasSecondaryAction>Golden retriever</InteractionTagPrimary>
        </PopoverTrigger>
        <PopoverSurface className={styles.popover}>
          <Link href="https://en.wikipedia.org/wiki/Golden_Retriever">Find out more on wiki</Link>
          <ul>
            <li>Size: Medium to large-sized dog breed. </li>
            <li>Coat: Luxurious double coat with a dense, water-repellent outer layer and a soft, dense undercoat.</li>
            <li>Color: Typically a luscious golden or cream color, with variations in shade.</li>
            <li>Build: Sturdy and well-proportioned body with a friendly and intelligent expression.</li>
          </ul>
        </PopoverSurface>
      </Popover>
      <Tooltip content="dismiss" relationship="label">
        <InteractionTagSecondary />
      </Tooltip>
    </InteractionTag>);
};

export default HasPrimaryAction;