import { ILazyableProps } from '@websolutespa/bom-mixer-models';
import { Container, Section, Text } from '../../components';

export type NotFoundItem = {
  title?: string;
};

export const NotFound = ({ item }: ILazyableProps<NotFoundItem>) => {
  return (
    <Section borderBottom="1px solid var(--color-neutral-300)">
      <Container textAlign="center">
        <Text variant="heading20" marginBottom="1rem">not found {item.schema}</Text>
        {item.title && <Text variant="display40" marginBottom="1rem">{item.title}</Text>}
        <code>{JSON.stringify(item, null, 2)}</code>
      </Container>
    </Section>
  );
};