import { CreateLiveBlog } from '@/components/admin/live-blog/CreateLiveBlog';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Link } from '@tanstack/react-router';
import { ArrowLeft } from 'lucide-react';

export function CreateLiveBlogComponent() {
  return (
    <div className="max-w-2xl mx-auto">
      <div className="mb-6">
        <Link to="/live-blogs">
          <Button variant="ghost" size="sm">
            <ArrowLeft className="w-4 h-4 mr-2" />
            Back to Live Blogs
          </Button>
        </Link>
      </div>

      <CreateLiveBlog 
        onSuccess={() => {
          // Success is handled by navigation in the component
        }}
      />

      <Card className="mt-6">
        <CardContent className="p-6">
          <h3 className="font-medium mb-2">Tips for creating a successful live blog:</h3>
          <ul className="text-sm text-muted-foreground space-y-1 list-disc pl-5">
            <li>Choose a clear, descriptive title that tells readers what to expect</li>
            <li>Use a URL-friendly slug (lowercase, hyphens, no spaces)</li>
            <li>Start with a draft status to prepare content before going live</li>
            <li>Use the description to provide context for readers</li>
            <li>Remember: you can always edit these details later</li>
          </ul>
        </CardContent>
      </Card>
    </div>
  );
}