import { type ReactElement } from 'react';
import styled from '@lilith/ui-styled-components';

const Root = styled.div`
  padding: 24px;
  color: #ff6b6b;
  font-size: 13px;
  background: rgba(255, 107, 107, 0.08);
  border: 1px solid rgba(255, 107, 107, 0.25);
  border-radius: 6px;
  margin: 16px;
`;

interface PageErrorProps {
  message: string;
}

export function PageError({ message }: PageErrorProps): ReactElement {
  return (
    <Root role="alert" aria-live="assertive">
      {message}
    </Root>
  );
}
