import { InfoIcon } from '@primer/octicons-react'
import type { ReactNode } from 'react'

import { cn } from '~/utils/cn'

interface Props {
	className?: string
	children: ReactNode
}

export default function Notice({ children, className }: Props) {
	return (
		<div className={cn(
			'p-4 rounded-md w-full flex items-center gap-3',
			'bg-ui-200 dark:bg-ui-800',
			className,
		)}
		>
			<InfoIcon className="h-6 w-6 text-ui-700 dark:text-ui-200" />
			{children}
		</div>
	)
}