Code Editor Sheet

"use client";

import * as React from "react";
import { Code2, Edit } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { CodeEditorSheetComposed } from "@/components/ui/code-editor-sheet";

function DemoMain() {
  return (
    <div className="w-full max-w-7xl mx-auto px-4 py-12">
      <div className="text-center my-12">
        <h1 className="text-4xl font-extrabold text-foreground tracking-tight">
          Code Editor Sheet
        </h1>
        <p className="text-lg text-muted-foreground mt-4 max-w-3xl mx-auto">
          Powered by shadcn/ui for UI components, ace-builds for multi-language code editing, next-themes for theme switching, and Radix UI for accessible dialogs.
        </p>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">Multi-language Editor</CardTitle>
            <CardDescription className="text-sm">Switch between all supported languages</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="outline" className="gap-2 w-full border-primary">
                  <Code2 className="h-4 w-4" />
                  Multi-language Editor
                </Button>
              }
              title="Multi-language Editor"
              description="Switch between all supported languages"
              defaultLanguage="html"
              allowLanguageChange={true}
              defaultValue={`<!-- Hello World in HTML -->
<h1>Hello, World!</h1>`}
              onSave={(code, lang) => console.log(`Saved ${lang} code:`, code)}
              onReset={() => console.log("Multi-language code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">CSS Editor</CardTitle>
            <CardDescription className="text-sm">Style your web content</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="outline" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  Write CSS
                </Button>
              }
              title="CSS Editor"
              description="Style your web content"
              defaultLanguage="css"
              allowLanguageChange={false}
              defaultValue={`/* Hello World in CSS */
.hello-world {
  color: blue;
  font-size: 16px;
}`}
              onSave={(code) => console.log("Saved CSS code:", code)}
              onReset={() => console.log("CSS code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">JavaScript Editor</CardTitle>
            <CardDescription className="text-sm">Add interactivity to your web apps</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="default" className="gap-2 w-full">
                  <Edit className="h-4 w-4" />
                  Edit JavaScript
                </Button>
              }
              title="JavaScript Editor"
              description="Add interactivity to your web apps"
              defaultLanguage="javascript"
              allowLanguageChange={false}
              defaultValue={`// Hello World in JavaScript
console.log("Hello, World!");`}
              onSave={(code) => console.log("Saved JavaScript code:", code)}
              onReset={() => console.log("JavaScript code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">TypeScript Editor</CardTitle>
            <CardDescription className="text-sm">Write type-safe JavaScript</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="secondary" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  TypeScript Code
                </Button>
              }
              title="TypeScript Editor"
              description="Write type-safe JavaScript"
              defaultLanguage="typescript"
              allowLanguageChange={false}
              defaultValue={`// Hello World in TypeScript
const message: string = "Hello, World!";
console.log(message);`}
              onSave={(code) => console.log("Saved TypeScript code:", code)}
              onReset={() => console.log("TypeScript code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">HTML Editor</CardTitle>
            <CardDescription className="text-sm">Structure your web pages</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="outline" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  HTML Content
                </Button>
              }
              title="HTML Editor"
              description="Structure your web pages"
              defaultLanguage="html"
              allowLanguageChange={false}
              defaultValue={`<!-- Hello World in HTML -->
<h1>Hello, World!</h1>`}
              onSave={(code) => console.log("Saved HTML code:", code)}
              onReset={() => console.log("HTML code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">JSON Editor</CardTitle>
            <CardDescription className="text-sm">Manage data configurations</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="ghost" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  JSON Config
                </Button>
              }
              title="JSON Editor"
              description="Manage data configurations"
              defaultLanguage="json"
              allowLanguageChange={false}
              defaultValue={`{
  "message": "Hello, World!"
}`}
              onSave={(code) => console.log("Saved JSON code:", code)}
              onReset={() => console.log("JSON code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">Python Editor</CardTitle>
            <CardDescription className="text-sm">Script with Python</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="outline" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  Python Script
                </Button>
              }
              title="Python Editor"
              description="Script with Python"
              defaultLanguage="python"
              allowLanguageChange={false}
              defaultValue={`# Hello World in Python
print("Hello World!")`}
              onSave={(code) => console.log("Saved Python code:", code)}
              onReset={() => console.log("Python code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">Java Editor</CardTitle>
            <CardDescription className="text-sm">Build robust applications</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="default" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  Java Code
                </Button>
              }
              title="Java Editor"
              description="Build robust applications"
              defaultLanguage="java"
              allowLanguageChange={false}
              defaultValue={`// Hello World in Java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}`}
              onSave={(code) => console.log("Saved Java code:", code)}
              onReset={() => console.log("Java code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">C/C++ Editor</CardTitle>
            <CardDescription className="text-sm">Write high-performance code</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="secondary" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  C/C++ Code
                </Button>
              }
              title="C/C++ Editor"
              description="Write high-performance code"
              defaultLanguage="c_cpp"
              allowLanguageChange={false}
              defaultValue={`// Hello World in C/C++
#include <iostream>
using namespace std;
int main() {
    cout << "Hello, World!" << endl;
    return 0;
}`}
              onSave={(code) => console.log("Saved C/C++ code:", code)}
              onReset={() => console.log("C/C++ code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">Ruby Editor</CardTitle>
            <CardDescription className="text-sm">Create elegant scripts</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="outline" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  Ruby Script
                </Button>
              }
              title="Ruby Editor"
              description="Create elegant scripts"
              defaultLanguage="ruby"
              allowLanguageChange={false}
              defaultValue={`# Hello World in Ruby
puts "Hello, World!"`}
              onSave={(code) => console.log("Saved Ruby code:", code)}
              onReset={() => console.log("Ruby code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">PHP Editor</CardTitle>
            <CardDescription className="text-sm">Develop dynamic web pages</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="ghost" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  PHP Code
                </Button>
              }
              title="PHP Editor"
              description="Develop dynamic web pages"
              defaultLanguage="php"
              allowLanguageChange={false}
              defaultValue={`<?php
// Hello World in PHP
echo "Hello, World!";
?>`}
              onSave={(code) => console.log("Saved PHP code:", code)}
              onReset={() => console.log("PHP code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">SQL Editor</CardTitle>
            <CardDescription className="text-sm">Query databases</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="outline" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  SQL Query
                </Button>
              }
              title="SQL Editor"
              description="Query databases"
              defaultLanguage="sql"
              allowLanguageChange={false}
              defaultValue={`-- Hello World in SQL
SELECT 'Hello, World!' AS message;`}
              onSave={(code) => console.log("Saved SQL code:", code)}
              onReset={() => console.log("SQL code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">Markdown Editor</CardTitle>
            <CardDescription className="text-sm">Write formatted documentation</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="default" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  Markdown Text
                </Button>
              }
              title="Markdown Editor"
              description="Write formatted documentation"
              defaultLanguage="markdown"
              allowLanguageChange={false}
              defaultValue={`# Hello, World!
Welcome to Markdown.`}
              onSave={(code) => console.log("Saved Markdown code:", code)}
              onReset={() => console.log("Markdown code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">Go Editor</CardTitle>
            <CardDescription className="text-sm">Build scalable applications</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="secondary" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  Go Code
                </Button>
              }
              title="Go Editor"
              description="Build scalable applications"
              defaultLanguage="golang"
              allowLanguageChange={false}
              defaultValue={`// Hello World in Go
package main
import "fmt"
func main() {
    fmt.Println("Hello, World!")
}`}
              onSave={(code) => console.log("Saved Go code:", code)}
              onReset={() => console.log("Go code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">Rust Editor</CardTitle>
            <CardDescription className="text-sm">Write safe, fast code</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="outline" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  Rust Code
                </Button>
              }
              title="Rust Editor"
              description="Write safe, fast code"
              defaultLanguage="rust"
              allowLanguageChange={false}
              defaultValue={`// Hello World in Rust
fn main() {
    println!("Hello, World!");
}`}
              onSave={(code) => console.log("Saved Rust code:", code)}
              onReset={() => console.log("Rust code reset")}
            />
          </CardContent>
        </Card>
        <Card className="flex flex-col shadow-sm hover:shadow-md transition-shadow">
          <CardHeader className="pb-4">
            <CardTitle className="text-lg font-semibold">Lua Editor</CardTitle>
            <CardDescription className="text-sm">Script lightweight applications</CardDescription>
          </CardHeader>
          <CardContent className="flex-1 flex items-center justify-center p-4">
            <CodeEditorSheetComposed
              trigger={
                <Button variant="ghost" className="gap-2 w-full">
                  <Code2 className="h-4 w-4" />
                  Lua Script
                </Button>
              }
              title="Lua Editor"
              description="Script lightweight applications"
              defaultLanguage="lua"
              allowLanguageChange={false}
              defaultValue={`-- Hello World in Lua
print("Hello, World!")`}
              onSave={(code) => console.log("Saved Lua code:", code)}
              onReset={() => console.log("Lua code reset")}
            />
          </CardContent>
        </Card>
      </div>
    </div>
  );
}


function DemoMultiLanguage() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="outline" className="gap-2 w-full border-primary">
            <Code2 className="h-4 w-4" />
            Multi-language Editor
          </Button>
        }
        title="Multi-language Editor"
        description="Switch between all supported languages"
        defaultLanguage="html"
        allowLanguageChange={true}
        defaultValue={`<!-- Hello World in HTML -->
<h1>Hello, World!</h1>`}
        onSave={(code, lang) => console.log(`Saved ${lang} code:`, code)}
        onReset={() => console.log("Multi-language code reset")}
      />
    </div>
  );
}

function DemoCSS() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="outline" className="gap-2">
            <Code2 className="h-4 w-4" />
            Write CSS
          </Button>
        }
        title="CSS Editor"
        description="Style your web content"
        defaultLanguage="css"
        allowLanguageChange={false}
        defaultValue={`/* Hello World in CSS */
.hello-world {
  color: blue;
  font-size: 16px;
}`}
        onSave={(code) => console.log("Saved CSS code:", code)}
        onReset={() => console.log("CSS code reset")}
      />
    </div>
  );
}

function DemoJavaScript() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="default" className="gap-2 w-full">
            <Edit className="h-4 w-4" />
            Edit JavaScript
          </Button>
        }
        title="JavaScript Editor"
        description="Add interactivity to your web apps"
        defaultLanguage="javascript"
        allowLanguageChange={false}
        defaultValue={`// Hello World in JavaScript
console.log("Hello, World!");`}
        onSave={(code) => console.log("Saved JavaScript code:", code)}
        onReset={() => console.log("JavaScript code reset")}
      />
    </div>
  );
}

function DemoTypeScript() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="secondary" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            TypeScript Code
          </Button>
        }
        title="TypeScript Editor"
        description="Write type-safe JavaScript"
        defaultLanguage="typescript"
        allowLanguageChange={false}
        defaultValue={`// Hello World in TypeScript
const message: string = "Hello, World!";
console.log(message);`}
        onSave={(code) => console.log("Saved TypeScript code:", code)}
        onReset={() => console.log("TypeScript code reset")}
      />
    </div>
  );
}

function DemoHTML() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="outline" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            HTML Content
          </Button>
        }
        title="HTML Editor"
        description="Structure your web pages"
        defaultLanguage="html"
        allowLanguageChange={false}
        defaultValue={`<!-- Hello World in HTML -->
<h1>Hello, World!</h1>`}
        onSave={(code) => console.log("Saved HTML code:", code)}
        onReset={() => console.log("HTML code reset")}
      />
    </div>
  );
}

function DemoJSON() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="ghost" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            JSON Config
          </Button>
        }
        title="JSON Editor"
        description="Manage data configurations"
        defaultLanguage="json"
        allowLanguageChange={false}
        defaultValue={`{
  "message": "Hello, World!"
}`}
        onSave={(code) => console.log("Saved JSON code:", code)}
        onReset={() => console.log("JSON code reset")}
      />
    </div>
  );
}

function DemoPython() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="outline" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            Python Script
          </Button>
        }
        title="Python Editor"
        description="Script with Python"
        defaultLanguage="python"
        allowLanguageChange={false}
        defaultValue={`# Hello World in Python
print("Hello World!")`}
        onSave={(code) => console.log("Saved Python code:", code)}
        onReset={() => console.log("Python code reset")}
      />
    </div>
  );
}

function DemoJava() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="default" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            Java Code
          </Button>
        }
        title="Java Editor"
        description="Build robust applications"
        defaultLanguage="java"
        allowLanguageChange={false}
        defaultValue={`// Hello World in Java
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}`}
        onSave={(code) => console.log("Saved Java code:", code)}
        onReset={() => console.log("Java code reset")}
      />
    </div>
  );
}

function DemoCPP() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="secondary" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            C/C++ Code
          </Button>
        }
        title="C/C++ Editor"
        description="Write high-performance code"
        defaultLanguage="c_cpp"
        allowLanguageChange={false}
        defaultValue={`// Hello World in C/C++
#include <iostream>
using namespace std;
int main() {
    cout << "Hello, World!" << endl;
    return 0;
}`}
        onSave={(code) => console.log("Saved C/C++ code:", code)}
        onReset={() => console.log("C/C++ code reset")}
      />
    </div>
  );
}

function DemoRuby() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="outline" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            Ruby Script
          </Button>
        }
        title="Ruby Editor"
        description="Create elegant scripts"
        defaultLanguage="ruby"
        allowLanguageChange={false}
        defaultValue={`# Hello World in Ruby
puts "Hello, World!"`}
        onSave={(code) => console.log("Saved Ruby code:", code)}
        onReset={() => console.log("Ruby code reset")}
      />
    </div>
  );
}

function DemoPHP() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="ghost" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            PHP Code
          </Button>
        }
        title="PHP Editor"
        description="Develop dynamic web pages"
        defaultLanguage="php"
        allowLanguageChange={false}
        defaultValue={`<?php
// Hello World in PHP
echo "Hello, World!";
?>`}
        onSave={(code) => console.log("Saved PHP code:", code)}
        onReset={() => console.log("PHP code reset")}
      />
    </div>
  );
}

function DemoSQL() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="outline" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            SQL Query
          </Button>
        }
        title="SQL Editor"
        description="Query databases"
        defaultLanguage="sql"
        allowLanguageChange={false}
        defaultValue={`-- Hello World in SQL
SELECT 'Hello, World!' AS message;`}
        onSave={(code) => console.log("Saved SQL code:", code)}
        onReset={() => console.log("SQL code reset")}
      />
    </div>
  );
}

function DemoMarkdown() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="default" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            Markdown Text
          </Button>
        }
        title="Markdown Editor"
        description="Write formatted documentation"
        defaultLanguage="markdown"
        allowLanguageChange={false}
        defaultValue={`# Hello, World!
Welcome to Markdown.`}
        onSave={(code) => console.log("Saved Markdown code:", code)}
        onReset={() => console.log("Markdown code reset")}
      />
    </div>
  );
}

function DemoGo() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="secondary" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            Go Code
          </Button>
        }
        title="Go Editor"
        description="Build scalable applications"
        defaultLanguage="golang"
        allowLanguageChange={false}
        defaultValue={`// Hello World in Go
package main
import "fmt"
func main() {
    fmt.Println("Hello, World!")
}`}
        onSave={(code) => console.log("Saved Go code:", code)}
        onReset={() => console.log("Go code reset")}
      />
    </div>
  );
}

function DemoRust() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="outline" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            Rust Code
          </Button>
        }
        title="Rust Editor"
        description="Write safe, fast code"
        defaultLanguage="rust"
        allowLanguageChange={false}
        defaultValue={`// Hello World in Rust
fn main() {
    println!("Hello, World!");
}`}
        onSave={(code) => console.log("Saved Rust code:", code)}
        onReset={() => console.log("Rust code reset")}
      />
    </div>
  );
}

function DemoLua() {
  return (
    <div className="flex justify-center items-center m-auto">
      <CodeEditorSheetComposed
        trigger={
          <Button variant="ghost" className="gap-2 w-full">
            <Code2 className="h-4 w-4" />
            Lua Script
          </Button>
        }
        title="Lua Editor"
        description="Script lightweight applications"
        defaultLanguage="lua"
        allowLanguageChange={false}
        defaultValue={`-- Hello World in Lua
print("Hello, World!")`}
        onSave={(code) => console.log("Saved Lua code:", code)}
        onReset={() => console.log("Lua code reset")}
      />
    </div>
  );
}

export {
  DemoMultiLanguage,
  DemoCSS,
  DemoJavaScript,
  DemoTypeScript,
  DemoHTML,
  DemoJSON,
  DemoPython,
  DemoJava,
  DemoCPP,
  DemoRuby,
  DemoPHP,
  DemoSQL,
  DemoMarkdown,
  DemoGo,
  DemoRust,
  DemoLua,
};

export default DemoMain;