import { SocialMediaPreview, FacebookFormValues } from 'social-media-previews';

const MyComponent = () => {
  const facebookData: FacebookFormValues = {
    fullName: "John Doe",
    postText: "Check out this amazing content!",
    profilePicture: "https://example.com/avatar.jpg",
    postImages: ["https://example.com/image1.jpg"],
    likeCount: 42,
    commentCount: 8,
    shareCount: 3,
    timestamp: new Date().toISOString(),
    verified: true
  };

  return (
    <SocialMediaPreview
      platform="facebook"
      theme="light"
      values={facebookData}
    />
  );
};

import { 
  FacebookPreview, 
  TwitterPreview, 
  InstagramPreview, 
  LinkedInPreview, 
  BlueskyPreview,
  type FacebookFormValues 
} from 'social-media-previews';

// Using individual components
const MyFacebookPreview = () => {
  const data: FacebookFormValues = {
    fullName: "John Doe",
    postText: "Hello World!"
  };

  return <FacebookPreview theme="light" values={data} />;
};

const MyTwitterPreview = () => {
  const data: TwitterFormValues = {
    displayName: "John Doe",
    handle: "@johndoe",
    tweetText: "Hello Twitter!"
  };

  return <TwitterPreview theme="dark" values={data} />;
};

import { SocialMediaPreview } from 'social-media-previews';
import type { 
  FacebookFormValues, 
  TwitterFormValues, 
  InstagramFormValues 
} from 'social-media-previews';

// Facebook Example
const facebookPost: FacebookFormValues = {
  fullName: "Tech Company",
  postText: "We're excited to announce our new product launch! 🚀",
  likeCount: 156,
  commentCount: 24,
  shareCount: 8,
  verified: true
};

// Twitter Example  
const tweet: TwitterFormValues = {
  displayName: "Tech Company",
  handle: "@techcompany",
  tweetText: "Just shipped a major update to our platform! Here's what's new:",
  likeCount: 89,
  retweetCount: 34,
  commentCount: 12
};

// Instagram Example
const instagramPost: InstagramFormValues = {
  username: "techcompany",
  fullName: "Tech Company",
  caption: "Behind the scenes at our office 📸 #techlife #innovation",
  location: "San Francisco, CA",
  likeCount: 234,
  commentCount: 18
};

const App = () => {
  return (
    <div className="space-y-8">
      <SocialMediaPreview 
        platform="facebook" 
        theme="light" 
        values={facebookPost} 
      />
      
      <SocialMediaPreview 
        platform="twitter" 
        theme="dark" 
        values={tweet} 
      />
      
      <SocialMediaPreview 
        platform="instagram" 
        theme="light" 
        values={instagramPost} 
      />
    </div>
  );
};

const postWithImages: FacebookFormValues = {
  fullName: "Travel Blogger",
  postText: "Amazing sunset from my latest adventure! 🌅",
  postImages: [
    "https://example.com/sunset1.jpg",
    "https://example.com/sunset2.jpg",
    "https://example.com/sunset3.jpg"
  ],
  likeCount: 89,
  commentCount: 15,
  profilePicture: "https://example.com/profile.jpg"
};

<SocialMediaPreview 
  platform="facebook" 
  theme="light" 
  values={postWithImages} 
/>

import type { 
  GeneralPreviewProps,
  FacebookFormValues,
  TwitterFormValues,
  InstagramFormValues,
  LinkedInFormValues,
  BlueskyFormValues 
} from 'social-media-previews';

// Type-safe platform switching
const renderPreview = (platform: string, data: any) => {
  switch (platform) {
    case 'facebook':
      return <SocialMediaPreview platform="facebook" theme="light" values={data as FacebookFormValues} />;
    case 'twitter':
      return <SocialMediaPreview platform="twitter" theme="light" values={data as TwitterFormValues} />;
    // ... other platforms
  }
};