.scrollbar::-webkit-scrollbar {
  width: 20px;
  height: 20px;
  background-color: #000000;
}
  
.scrollbar::-webkit-scrollbar:horizontal {
  border-bottom-left-radius: 8px;
}

.scrollbar::-webkit-scrollbar:vertical {
  border-top-right-radius: 8px;
}

.scrollbar::-webkit-scrollbar-track { 
  background: #000000;
  border-radius: 8px;
}

.scrollbar::-webkit-scrollbar-thumb { 
  background:#333333;
  border-radius: 8px;
  background-clip: padding-box;
  border: 5px solid transparent;
}

.scrollbar::-webkit-scrollbar-corner {
  background-color: #000000;
  border-bottom-right-radius: 8px;
}

import {common, createStarryNight } from '@wooorm/starry-night'
import sourceTsx from '@wooorm/starry-night/source.tsx'
import {toHtml} from 'hast-util-to-html'
import '@wooorm/starry-night/style/dark'
import '@/ui/code-highlighter/code-highlighter.css'

const languages  = [...common, sourceTsx] 

const starryNight = await createStarryNight(languages) 

type CodeHighlighterProps = {
  title: string;
  code: string;
  grammar: string;
};

export default function CodeHighlighter({ title, code, grammar }: CodeHighlighterProps) {
    return (
        <div className="flex flex-col bg-[#222222] text-white m-10 w-[calc(100%-5rem)] rounded-2xl overflow-hidden border-4 border-cyan-950">
            <div className="rounded-t-2xl p-3 pb-2 ps-5 text-xl border-b-4 border-[#333333] font-bold">
                {title}
            </div>
            <pre className=" rounded-b-2xl pt-5 pb-5 ps-5 pe-5 overflow-scroll scrollbar">
                <code dangerouslySetInnerHTML={{ __html: toHtml(starryNight.highlight(code, grammar)) }}></code>
            </pre>
        </div>
    )
}