'use client'

import { useState } from 'react'
import Tabs from '@/components/ui/Tabs'
import CodeBox from './CodeBox'
import { BiLogoTypescript, BiLogoJavascript } from "react-icons/bi";
import type { ReactNode } from 'react'

const { TabNav, TabList, TabContent } = Tabs

type CodeToggleTabsProps = {
    tsMarkdown?: string | null
    jsMarkdown?: string | null
    languages?: string[]
    controlledValue?: string
    codeBoxClassName?: string
    onChange?: (value: string) => void
    tsCallback?: () => ReactNode
    jsCallback?: () => ReactNode
}

const CodeToggleTabs = ({ controlledValue, tsMarkdown, jsMarkdown, onChange, codeBoxClassName, languages = ['tsx', 'jsx'], tsCallback, jsCallback }: CodeToggleTabsProps) => {

    const [mdType, setMdType] = useState('ts')

    const handleChange = (value: string) => {
        setMdType(value)
        onChange?.(value)
    }

    return (
        <Tabs value={controlledValue || mdType} onChange={handleChange}>
            <TabList>
                <TabNav value="ts">
                    <div className="flex items-center gap-1">
                        <BiLogoTypescript className="text-2xl" />
                        <span>Typescript</span>
                    </div>
                </TabNav>
                <TabNav value="js">
                    <div className="flex items-center gap-1">
                        <BiLogoJavascript className="text-2xl" />
                        <span>Javascript</span>
                    </div>
                </TabNav>
            </TabList>
            <div className="py-0">
                <TabContent value="ts">
                    {
                        tsCallback ? tsCallback() : <CodeBox markdown={tsMarkdown as string} className={codeBoxClassName} language={languages[0]} />
                    }
                </TabContent>
                <TabContent value="js">
                    {
                        jsCallback ? jsCallback() : <CodeBox markdown={jsMarkdown as string || tsMarkdown as string} className={codeBoxClassName} language={languages[1]} />
                    }
                </TabContent>
            </div>
        </Tabs>
    )
}

export default CodeToggleTabs