'use client';

import * as React from 'react';
import { Tweet } from 'react-tweet';

interface TwitterEmbedProps {
  tweetId: string;
  theme?: 'light' | 'dark';
  className?: string;
  align?: 'left' | 'center' | 'right';
}

export function TwitterEmbed({
  tweetId,
  theme = 'light',
  className = "",
  align = 'center'
}: TwitterEmbedProps) {
  const alignmentClass = align === 'left' ? 'mr-auto ml-0' : align === 'right' ? 'ml-auto mr-0' : 'mx-auto';

  return (
    <div className={`not-prose ${className} ${alignmentClass} flex justify-center w-full my-8 min-h-[100px]`}>
      <div className={theme === 'dark' ? 'dark' : 'light'}>
        {/* We use our local API proxy to avoid CORS/404 issues with the public Vercel proxy */}
        <Tweet id={tweetId} apiUrl={`/api/tweet/${tweetId}`} />
      </div>
    </div>
  );
}