import React from "react"
import {
  BlockProps,
  LabelSmall,
  mergeOverrides,
  useStyletron,
} from "@mezo-org/mezo-clay"

type AccountErrorProps = {
  topic: string
} & BlockProps

export default function AccountError(props: AccountErrorProps) {
  const { topic, overrides, ...restProps } = props

  const [, theme] = useStyletron()

  return (
    <LabelSmall
      padding={`${theme.sizing.scale600} ${theme.sizing.scale800}`}
      color="negative"
      overrides={mergeOverrides(overrides, {
        Block: {
          style: {
            lineHeight: theme.sizing.scale700,
          },
        },
      })}
      {...restProps}
    >
      An error occured loading {topic}.
    </LabelSmall>
  )
}