How to handle empty content in Sanity previews with fallbacks?

export default {
  name: 'myModule',
  type: 'object',
  fields: [
    {name: 'title', type: 'string'},
    {name: 'image', type: 'image'},
    {name: 'content', type: 'text'}
  ],
  preview: {
    select: {
      title: 'title',
      image: 'image',
      content: 'content'
    },
    prepare({title, image, content}) {
      return {
        title: title || '⚠️ No title added',
        subtitle: content || 'Click to add content',
        media: image || () => '📝' // or import an icon from @sanity/icons
      }
    }
  }
}

prepare({title, image, content}) {
  const missing = []
  if (!title) missing.push('title')
  if (!image) missing.push('image')
  if (!content) missing.push('content')
  
  return {
    title: title || 'Incomplete module',
    subtitle: missing.length ? `Missing: ${missing.join(', ')}` : 'Ready',
    media: image
  }
}

{
  name: 'image',
  type: 'image',
  validation: Rule => Rule.required().error('Please add an image')
},
{
  name: 'content',
  type: 'text',
  validation: Rule => Rule.required().warning('Content is recommended')
}

function ModuleComponent({ module }) {
  if (!module?.image || !module?.content) {
    return (
      <div className="preview-placeholder">
        <p>⚠️ This module needs content</p>
        <ul>
          {!module?.image && <li>Add an image</li>}
          {!module?.content && <li>Add content</li>}
        </ul>
      </div>
    )
  }
  
  return (
    // your normal component
  )
}

const imageUrl = module?.image?.asset?.url ?? '/placeholder-image.jpg'
const title = module?.title ?? 'Untitled'
const content = module?.content ?? 'No content yet'

const CustomModuleInput = (props) => {
  const {title, image, content} = props.value || {}
  const hasEmptyFields = !title || !image || !content
  
  return (
    <Stack space={3}>
      {hasEmptyFields && (
        <Card tone="caution" padding={3}>
          <Text>⚠️ Please complete all fields for this module</Text>
        </Card>
      )}
      {props.renderDefault(props)}
    </Stack>
  )
}

// In your schema:
{
  name: 'myModule',
  type: 'object',
  components: {
    input: CustomModuleInput
  }
}