import { css } from "@emotion/react";
import type { ReactNode } from "react";

import { Flex, Icon, Icons, Text } from "@phoenix/components";

export function PlaygroundErrorWrap({ children }: { children: ReactNode }) {
  return (
    <Flex direction="row" gap="size-50" alignItems="center">
      <Icon
        svg={<Icons.AlertCircle />}
        color="danger"
        css={css`
          flex-shrink: 0;
        `}
      />
      <Text color="danger">{children}</Text>
    </Flex>
  );
}
