import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** Basic syntax highlighting demo */
export function CodeHighlightedBasicDemo() {
  return (
    <DemoProvider>
      <CodeHighlighted
        code={`const greeting = "Hello, World!";
console.log(greeting);`}
        lang="typescript"
      />
    </DemoProvider>
  );
}

import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** TypeScript with interface */
export function CodeHighlightedTypeScriptDemo() {
  return (
    <DemoProvider>
      <CodeHighlighted
        code={`interface User {
  id: string;
  name: string;
  email: string;
}

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(\`/api/users/\${id}\`);
  return response.json();
}`}
        lang="typescript"
      />
    </DemoProvider>
  );
}

import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** SolidJS/TSX code example */
export function CodeHighlightedSolidDemo() {
  return (
    <DemoProvider>
      <CodeHighlighted
        code={`import { createSignal } from "solid-js";

export function Counter() {
  const [count, setCount] = createSignal(0);
  
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count()}
    </button>
  );
}`}
        lang="tsx"
      />
    </DemoProvider>
  );
}

import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** Bash/shell commands */
export function CodeHighlightedBashDemo() {
  return (
    <DemoProvider>
      <CodeHighlighted
        code={`# Install Kumo for SolidJS
npm install @photon-ai/kumo-solid solid-js

# Or with pnpm
pnpm add @photon-ai/kumo-solid solid-js

# Start development server
pnpm dev`}
        lang="bash"
      />
    </DemoProvider>
  );
}

import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** JSON configuration */
export function CodeHighlightedJsonDemo() {
  return (
    <DemoProvider>
      <CodeHighlighted
        code={`{
  "name": "kumo-solid-app",
  "private": true,
  "dependencies": {
    "@photon-ai/kumo-solid": "^0.1.0",
    "solid-js": "^1.9.0",
    "shiki": "^4.0.0"
  }
}`}
        lang="json"
      />
    </DemoProvider>
  );
}

import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** CSS code example */
export function CodeHighlightedCssDemo() {
  return (
    <DemoProvider>
      <CodeHighlighted
        code={`.button {
  background: var(--color-brand);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  
  &:hover {
    background: var(--color-brand-hover);
  }
}`}
        lang="css"
      />
    </DemoProvider>
  );
}

import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** With highlighted lines */
export function CodeHighlightedHighlightLinesDemo() {
  return (
    <DemoProvider>
      <CodeHighlighted
        code={`function processData(items: string[]) {
  // Filter out empty items
  const filtered = items.filter(Boolean);
  
  // Transform to uppercase (highlighted)
  const transformed = filtered.map(item => item.toUpperCase());
  
  // Return sorted result
  return transformed.toSorted();
}`}
        lang="typescript"
        highlightLines={[5, 6]}
      />
    </DemoProvider>
  );
}

import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** With line numbers */
export function CodeHighlightedLineNumbersDemo() {
  return (
    <DemoProvider>
      <CodeHighlighted
        code={`import { createSignal, onCleanup, onMount } from "solid-js";

export function useWindowSize() {
  const [size, setSize] = createSignal({ width: 0, height: 0 });
  
  onMount(() => {
    function handleResize() {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    
    handleResize();
    window.addEventListener("resize", handleResize);
    onCleanup(() => window.removeEventListener("resize", handleResize));
  });
  
  return size;
}`}
        lang="typescript"
        showLineNumbers
      />
    </DemoProvider>
  );
}

import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** With copy button */
export function CodeHighlightedCopyButtonDemo() {
  return (
    <DemoProvider>
      <CodeHighlighted
        code={`npm install @photon-ai/kumo-solid solid-js`}
        lang="bash"
        showCopyButton
      />
    </DemoProvider>
  );
}

import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** Full featured example */
export function CodeHighlightedFullFeaturedDemo() {
  return (
    <DemoProvider>
      <CodeHighlighted
        code={`import { ShikiProvider, CodeHighlighted } from "@photon-ai/kumo-solid/code";

export function CodeExample({ code, language }: Props) {
  return (
    <ShikiProvider
      engine="javascript"
      languages={["tsx", "typescript", "bash", "json"]}
    >
      <CodeHighlighted
        code={code}
        lang={language}
        showCopyButton
      />
    </ShikiProvider>
  );
}`}
        lang="tsx"
        showCopyButton
        highlightLines={[6, 7, 8, 9]}
      />
    </DemoProvider>
  );
}

import { CodeHighlighted } from "@photon-ai/kumo-solid/code";

/** Multiple code blocks sharing a provider */
export function CodeHighlightedSharedProviderDemo() {
  return (
    <DemoProvider>
      <div class="space-y-4">
        <CodeHighlighted
          code={`const config = { theme: "dark" };`}
          lang="typescript"
        />
        <CodeHighlighted code={`npm run build`} lang="bash" />
        <CodeHighlighted code={`{ "success": true }`} lang="json" />
      </div>
    </DemoProvider>
  );
}