import React from 'react';
import { PlaygroundCard } from '@site/src/components/ui-shared/playground-card';

const DemoPlaceholderCard: React.FC = () => {
  const playIcon = (
    <svg
      width="48"
      height="48"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      style={{
        color: '#94a3b8',
        opacity: 0.7
      }}
    >
      <circle cx="12" cy="12" r="10" />
      <polygon points="10,8 16,12 10,16 10,8" />
    </svg>
  );

  return (
    <PlaygroundCard
      title="Live Demonstration"
      icon={playIcon}
    >
      A live demonstration will be added here soon
    </PlaygroundCard>
  );
};

export default DemoPlaceholderCard;
