import { BlogHeading, BlogQuote, BlogCTA, BlogCodeBlock } from '../_components';
import type { TocItem } from '../types';

export const tocItems: TocItem[] = [
  { id: 'overview', text: 'Overview', level: 2 },
  { id: 'authentication', text: 'Authentication Setup', level: 2 },
  { id: 'error-handling', text: 'Error Handling', level: 2 },
  { id: 'rate-limits', text: 'Rate Limits', level: 3 },
  { id: 'caching', text: 'Caching Strategies', level: 2 },
  { id: 'conclusion', text: 'Conclusion', level: 2 },
];

export const Content = () => (
  <>
    <BlogHeading id="overview" level={2}>
      Overview
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Integrating the Banatie API into your application opens up a world of
      possibilities for dynamic image generation. This guide covers the best
      practices for a smooth integration.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      Whether you are building a web application, mobile app, or backend service,
      these tips will help you get the most out of the API.
    </p>

    <BlogHeading id="authentication" level={2}>
      Authentication Setup
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      All API requests require authentication via an API key. Here is how to
      set it up properly:
    </p>

    <BlogCodeBlock language="javascript">
      {`const headers = {
  'X-API-Key': process.env.BANATIE_API_KEY,
  'Content-Type': 'application/json'
};

const response = await fetch('https://api.banatie.app/text-to-image', {
  method: 'POST',
  headers,
  body: JSON.stringify({ prompt: 'modern office' })
});`}
    </BlogCodeBlock>

    <BlogQuote>
      Never expose your API key in client-side code. Always make API calls
      from your server.
    </BlogQuote>

    <BlogHeading id="error-handling" level={2}>
      Error Handling
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Proper error handling ensures your application gracefully handles
      failures. The API returns standard HTTP status codes.
    </p>

    <BlogCodeBlock language="javascript">
      {`try {
  const response = await generateImage(prompt);
  if (!response.ok) {
    if (response.status === 429) {
      // Rate limited - implement backoff
    }
    throw new Error(\`API error: \${response.status}\`);
  }
} catch (error) {
  console.error('Image generation failed:', error);
  // Show fallback image
}`}
    </BlogCodeBlock>

    <BlogHeading id="rate-limits" level={3}>
      Rate Limits
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      The API has rate limits to ensure fair usage. Plan your requests
      accordingly and implement exponential backoff for retries.
    </p>

    <BlogHeading id="caching" level={2}>
      Caching Strategies
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Caching generated images can significantly reduce API calls and improve
      response times. Consider caching at multiple levels.
    </p>
    <p className="text-gray-700 leading-relaxed mb-4">
      Use CDN caching for frequently requested images and local caching for
      user-specific content.
    </p>

    <BlogHeading id="conclusion" level={2}>
      Conclusion
    </BlogHeading>
    <p className="text-gray-700 leading-relaxed mb-4">
      Following these best practices will help you build a robust integration
      with the Banatie API. Start small, test thoroughly, and scale as needed.
    </p>

    <BlogCTA
      title="Ready to integrate?"
      description="Get your API key and start building today."
      buttonText="Get API Access"
      buttonHref="/#get-access"
    />
  </>
);
