HoverCard Component

import { HoverCard } from '@dashflowx/core'

export default function HoverCardExample() {
  return (
    <HoverCard 
      hoverCardTrigger="Hover me"
      hoverCardContent="This is hover card content"
    />
  )
}

import { HoverCard } from '@dashflowx/core'

export default function BasicHoverCard() {
  return (
    <HoverCard 
      hoverCardTrigger="View Profile"
      hoverCardContent="John Doe - Software Engineer at Tech Corp"
    />
  )
}

import { HoverCard } from '@dashflowx/core'

export default function UserProfileHoverCard() {
  return (
    <HoverCard 
      hoverCardTrigger="👤 @johndoe"
      hoverCardContent="John Doe - Software Engineer at Tech Corp. Passionate about React and TypeScript. Based in San Francisco."
    />
  )
}

import { HoverCard } from '@dashflowx/core'

export default function ProductPreviewHoverCard() {
  return (
    <HoverCard 
      hoverCardTrigger="📱 iPhone 15 Pro"
      hoverCardContent="Latest iPhone with A17 Pro chip, titanium design, and advanced camera system. Starting at $999."
    />
  )
}

import { HoverCard } from '@dashflowx/core'

export default function LinkPreviewHoverCard() {
  return (
    <HoverCard 
      hoverCardTrigger="🔗 Visit Website"
      hoverCardContent="React - A JavaScript library for building user interfaces. Learn more about React's features and capabilities."
    />
  )
}

import { HoverCard } from '@dashflowx/core'

export default function CustomStyledHoverCard() {
  return (
    <HoverCard 
      hoverCardTrigger="🎨 Custom Style"
      hoverCardContent="This hover card has custom styling with different colors and layout."
      className="border-2 border-blue-500 rounded-xl"
    />
  )
}

const userProfileCard = (
  <HoverCard 
    hoverCardTrigger="👤 @username"
    hoverCardContent="Full Name - Job Title at Company. Brief bio and location information."
  />
);

const productCard = (
  <HoverCard 
    hoverCardTrigger="🛍️ Product Name"
    hoverCardContent="Product description, price, and key features. Quick preview without leaving the page."
  />
);

const linkPreviewCard = (
  <HoverCard 
    hoverCardTrigger="🔗 External Link"
    hoverCardContent="Website title and description. Preview of the linked content."
  />
);

const toolInfoCard = (
  <HoverCard 
    hoverCardTrigger="🔧 Tool Name"
    hoverCardContent="Tool description, features, and usage examples. Quick reference information."
  />
);

const statusCard = (
  <HoverCard 
    hoverCardTrigger="🟢 Online"
    hoverCardContent="User is currently online. Last seen 2 minutes ago. Available for chat."
  />
);

// ✅ Good - Clear trigger
<HoverCard hoverCardTrigger="View Profile" />

// ❌ Avoid - Unclear trigger
<HoverCard hoverCardTrigger="Click" />

// ✅ Good - Concise content
<HoverCard hoverCardContent="John Doe - Software Engineer" />

// ❌ Avoid - Too much content
<HoverCard hoverCardContent="John Doe is a software engineer who works at Tech Corp. He has been working there for 5 years and specializes in React development. He lives in San Francisco with his family and enjoys hiking on weekends..." />

// ✅ Good - Quick preview
<HoverCard hoverCardContent="Product: $29.99 - In Stock" />

// ❌ Avoid - Detailed information
<HoverCard hoverCardContent="This product is made from high-quality materials and includes a 2-year warranty. It's available in 5 colors and ships within 2-3 business days. Customer reviews average 4.5 stars..." />

// ✅ Good - Accessible content
<HoverCard hoverCardContent="User profile information" />

// ❌ Avoid - Content that requires hover
<HoverCard hoverCardContent="Hover over this text to see more" />

// ✅ Good - Consistent styling
<HoverCard className="standard-hover-card" />

// ❌ Avoid - Inconsistent styling
<HoverCard className="random-styles" />

<HoverCard 
  hoverCardTrigger="Custom Styled"
  hoverCardContent="Custom content"
  className="border-2 border-purple-500 rounded-xl"
/>

// Light theme
<HoverCard className="bg-white border-gray-200" />

// Dark theme
<HoverCard className="bg-gray-900 border-gray-700 text-white" />

// Brand theme
<HoverCard className="bg-blue-50 border-blue-200" />

// Small hover card
<HoverCard className="w-64" />

// Medium hover card
<HoverCard className="w-80" />

// Large hover card
<HoverCard className="w-96" />

const [hoverContent, setHoverContent] = useState('Loading...');

useEffect(() => {
  // Load content based on trigger
  loadHoverContent(triggerId).then(setHoverContent);
}, [triggerId]);

const getHoverContent = (user) => {
  if (user.isOnline) {
    return `${user.name} - Online now`;
  }
  return `${user.name} - Last seen ${user.lastSeen}`;
};

const richContent = (
  <div>
    <h4>Product Name</h4>
    <p>Description</p>
    <div className="flex space-x-2">
      <button>Add to Cart</button>
      <button>View Details</button>
    </div>
  </div>
);