import React from 'react';
import { theme } from '@cloudflare/style-const';
import { Div } from '@cloudflare/elements';

type Props = React.ComponentProps<typeof Div> & {
  id: string;
  children: React.ReactNode;
};

export default function Error({ id, children, ...rest }: Props) {
  return (
    <Div
      mb={2}
      fontSize={2}
      color={theme.colors.error}
      {...rest}
      id={id}
      role="alert"
    >
      {children}
    </Div>
  );
}