starr-philproperties/apps/web/src/components/generic/Blocks/Admin/CodeBlock.jsx

import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

const LANGUAGES = [
    { value: "html",       label: "HTML" },
    { value: "css",        label: "CSS" },
    { value: "javascript", label: "JavaScript" },
    { value: "typescript", label: "TypeScript" },
    { value: "jsx",        label: "JSX / TSX" },
    { value: "python",     label: "Python" },
    { value: "sql",        label: "SQL" },
    { value: "bash",       label: "Shell / Bash" },
    { value: "json",       label: "JSON" },
    { value: "text",       label: "Plain Text" },
];

export function CodeBlock({ content, onUpdate }) {
    return (
        <div className="space-y-3">
            <div className="flex items-center gap-3">
                <Label>Language</Label>
                <select
                    value={content.language ?? "javascript"}
                    onChange={(e) => onUpdate({ ...content, language: e.target.value })}
                    className="h-7 text-xs border rounded px-2 bg-background cursor-pointer"
                >
                    {LANGUAGES.map((l) => (
                        <option key={l.value} value={l.value}>{l.label}</option>
                    ))}
                </select>
            </div>

            <div className="space-y-1.5">
                <Label>Code</Label>
                <Textarea
                    value={content.code ?? ""}
                    onChange={(e) => onUpdate({ ...content, code: e.target.value })}
                    placeholder="// Write or paste your code here..."
                    className="font-mono text-sm min-h-[180px] resize-y leading-relaxed"
                    spellCheck={false}
                    autoComplete="off"
                    autoCorrect="off"
                    autoCapitalize="off"
                />
            </div>
        </div>
    );
}