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

export const DeveloperToolboxExperience: React.FC = () => {
  const toolboxIcon = (
    <svg
      width="32"
      height="32"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      style={{
        color: 'var(--ifm-color-content-secondary)',
        opacity: 0.7
      }}
    >
      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
    </svg>
  );

  return (
    <PlaygroundCard
      title="Playground — Developer Toolbox"
      icon={toolboxIcon}
    >
      <div style={{ marginBottom: '1rem', color: 'var(--ifm-color-content-secondary)', fontSize: '0.9rem' }}>
        Experience Unisphere's powerful developer tools in real time
      </div>

      <div
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: '12px',
          padding: '12px 24px',
          backgroundColor: 'var(--ifm-background-surface-color)',
          borderRadius: 'var(--ifm-code-border-radius)',
          border: '1px solid var(--uc-border-color)',
          boxShadow: 'var(--ifm-global-shadow-lw)',
          flexWrap: 'wrap',
          justifyContent: 'center',
          minHeight: '48px',
        }}
      >
        <span style={{ fontSize: '14px', fontWeight: '500', color: 'var(--ifm-color-content)' }}>Press</span>
        <kbd
          style={{
            padding: '4px 8px',
            backgroundColor: 'var(--ifm-background-surface-color)',
            borderRadius: 'var(--ifm-code-border-radius)',
            border: '1px solid var(--uc-border-color)',
            boxShadow: 'var(--ifm-global-shadow-lw)',
            fontSize: '12px',
            fontFamily: 'monospace',
            color: 'var(--ifm-color-content-secondary)',
            fontWeight: '500'
          }}
        >
          CMD + K
        </kbd>
        <span style={{ fontSize: '14px', color: 'var(--ifm-color-content-secondary)' }}>or</span>
        <kbd
          style={{
            padding: '4px 8px',
            backgroundColor: 'var(--ifm-background-surface-color)',
            borderRadius: 'var(--ifm-code-border-radius)',
            border: '1px solid var(--uc-border-color)',
            boxShadow: 'var(--ifm-global-shadow-lw)',
            fontSize: '12px',
            fontFamily: 'monospace',
            color: 'var(--ifm-color-content-secondary)',
            fontWeight: '500'
          }}
        >
          Ctrl + K
        </kbd>
        <span style={{ fontSize: '14px', fontWeight: '500', color: 'var(--ifm-color-content)' }}>to open the Developer Toolbox</span>
      </div>
    </PlaygroundCard>
  );
};

export default DeveloperToolboxExperience;
