import Tab from 'components/common/Tab'
import LendIntro from 'components/lend/LendIntro'
import Lends from 'components/lend/Lends'
import Deposits from 'components/v1/Deposits'
import V1Intro from 'components/v1/V1Intro'
import { LEND_AND_BORROW_TABS } from 'constants/pages'
import useStore from 'store'

export default function LendPage() {
  const isV1 = useStore((s) => s.isV1)

  return (
    <div className='flex flex-wrap w-full gap-6'>
      <Tab tabs={LEND_AND_BORROW_TABS} activeTabIdx={0} showV1Toggle />
      {isV1 ? <V1Intro /> : <LendIntro />}
      {isV1 ? <Deposits /> : <Lends />}
    </div>
  )
}