'use client'
import { useChatStore } from '../store'
import Profile from './Profile'
import Personal from './Personal'
import VoiceActor from './VoiceActor'
import Font from './Font'
import MaxToken from './MaxToken'
import Background from './Background'
import ChatModel from './ChatModel'
import { IconButton } from '@/components/ui/button'
import React from 'react'

export const SiderHeader = React.memo(({ title }: { title: string }) => {
  const setSideBar = useChatStore((store) => store.setSideBar)
  return (
    <div className="flex gap-2 mb-7 items-center">
      <IconButton variant="ghost" size="small" onClick={() => setSideBar('profile')}>
        <i className="iconfont-v2 iconv2-jiantou" />
      </IconButton>
      <div className="txt-title-m">{title}</div>
    </div>
  )
})

export default function Sider() {
  const sideBar = useChatStore((store) => store.sideBar)
  return (
    <div className="w-100 h-full overflow-y-auto border-outline-normal border-l bg-[rgba(17,16,38,1)] p-6">
      {sideBar === 'profile' && <Profile />}
      {sideBar === 'personal' && <Personal />}
      {sideBar === 'voice_actor' && <VoiceActor />}
      {sideBar === 'font' && <Font />}
      {sideBar === 'max_token' && <MaxToken />}
      {sideBar === 'background' && <Background />}
      {sideBar === 'model' && <ChatModel />}
    </div>
  )
}
