import { css } from "@emotion/react";
import { ReactNode } from "react";
import { Pressable } from "react-aria-components";
import { Flex } from "@phoenix/components";
import {
Annotation,
AnnotationNameAndValue,
} from "@phoenix/components/annotation";
/**
* A button that appears like a list item but that is still interactive
* to show a pop-over for the details
*/
export function ExperimentAnnotationButton({
annotation,
extra,
positiveOptimization,
}: {
annotation: Annotation;
/**
* Whether the annotation is a positive or negative optimization
*
* If not provided, the component will not display the optimization information.
*/
positiveOptimization?: boolean;
/**
* Additional content like controls that will be placed on the right
*/
extra?: ReactNode;
}) {
return (
<Pressable>
<button
className="button--reset"
css={css`
container-type: inline-size;
cursor: pointer;
padding: var(--global-dimension-size-50) var(--global-dimension-size-100);
flex: 1 1 auto;
border-radius: var(--global-rounding-small);
width: 100%;
min-width: 0;
&:hover {
background-color: var(--global-color-gray-200);
}
`}
>
<Flex
direction="row"
gap="size-600"
alignItems="center"
justifyContent="space-between"
>
<AnnotationNameAndValue
positiveOptimization={positiveOptimization}
annotation={annotation}
displayPreference="score"
maxWidth="unset"
showColorSwatch={false}
/>
{extra}
</Flex>
</button>
</Pressable>
);
}
