{/* Main Content */}
      <div className="space-y-6">
        {type === 'video' ? (
          <Card>
            <CardContent className="pt-6">
              <VideoPlayer 
                url={draftData.content} 
                title={draftData.title}
                duration="15 min"
              />
              <div className="prose prose-lg max-w-none mt-6">
                <p className="text-muted-foreground">Video URL: {draftData.content}</p>
              </div>
            </CardContent>
          </Card>
        ) : (
          <Card>
            <CardContent className="pt-6">
              <div className="prose prose-lg max-w-none">
                <MarkdownRenderer content={draftData.content} />
              </div>
            </CardContent>
          </Card>
        )}
      </div>
      
      {/* Additional Links */}
      {additionalLinks && additionalLinks.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <ExternalLink className="h-5 w-5" />
              <span>Additional Resources</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              {additionalLinks.map((link, index) => (
                <Button
                  key={index}
                  variant="outline"
                  className="justify-start"
                  asChild
                >
                  <a href={link} target="_blank" rel="noopener noreferrer">
                    <ExternalLink className="h-4 w-4 mr-2" />
                    Resource {index + 1}
                  </a>
                </Button>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Draft Actions */}
      <Card>
        <CardHeader>
          <CardTitle>Draft Actions</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col sm:flex-row gap-3">
            <Button className="flex-1" asChild>
              <Link href={`/create?draft=${resourceId}`}>
                <Edit className="h-4 w-4 mr-2" />
                Edit Content
              </Link>
            </Button>
            <Button variant="outline" className="flex-1" asChild>
              <Link href={`/drafts/resources/${resourceId}/publish`}>
                <Share className="h-4 w-4 mr-2" />
                Publish to Nostr
              </Link>
            </Button>
            <Button variant="outline" className="flex-1" asChild>
              <Link href={`/drafts/resources/${resourceId}`}>
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Overview
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}

/**
 * Resource draft preview page with full content display
 */
function ResourceDraftPreviewContent({ resourceId }: { resourceId: string }) {
  return (
    <MainLayout>
      <Section spacing="lg">
        <div className="space-y-6">
          {/* Navigation */}
          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2">
            <Button variant="ghost" size="sm" className="justify-start w-full sm:w-auto" asChild>
              <Link href={`/drafts/resources/${resourceId}`}>
                <ArrowLeft className="h-4 w-4 mr-2" />
                Back to Draft Overview
              </Link>
            </Button>
            <span className="text-muted-foreground hidden sm:inline">•</span>
            <div className="flex items-center space-x-2">
              <FileText className="h-4 w-4" />
              <span className="text-sm text-muted-foreground">
                Draft Content Preview
              </span>
            </div>
          </div>

          {/* Content */}
          <Suspense fallback={<ContentSkeleton />}>
            <ResourceDraftContent resourceId={resourceId} />
          </Suspense>
        </div>
      </Section>
    </MainLayout>
  )
}

export default function ResourceDraftPreviewPage({ params }: ResourceDraftPreviewPageProps) {
  const [resourceId, setResourceId] = useState<string>('')

  useEffect(() => {
    params.then(p => setResourceId(p.id))
  }, [params])

  if (!resourceId) {
    return (
      <MainLayout>
        <Section spacing="lg">
          <div className="animate-pulse">
            <div className="h-8 bg-muted rounded w-3/4"></div>
          </div>
        </Section>
      </MainLayout>
    )
  }

  return <ResourceDraftPreviewContent resourceId={resourceId} />
}