import { WidgetModel } from '@/graphql'

import { Content } from './Content'

interface WidgetProps {
	data: WidgetModel & { i: string }
	className?: string
}

export function Widget({ data, className }: WidgetProps) {
	const { name, description, componentId, viewOptions, dataOptions } = data

	return (
		<div className={className}>
			<h3>{name}</h3>
			{description && <p>{description}</p>}
			{componentId && (
				<Content
					componentId={componentId}
					viewOptions={viewOptions}
					dataOptions={dataOptions}
				/>
			)}
		</div>
	)
}
