import React, { cloneElement } from 'react'
import Avatar from '@/components/ui/Avatar'
import Logo from '@/components/template/Logo'
import { APP_NAME } from '@/constants/app.constant'
import type { CommonProps } from '@/proxy/common'
import { useLocalization } from '@/utils/hooks/useLocalization'
import { ROUTES_ENUM } from '@/routes/route.constant'
import useDarkMode from '@/utils/hooks/useDarkmode'

interface SideProps extends CommonProps {
  content?: React.ReactNode
}

const Side = ({ children, content, ...rest }: SideProps) => {
  const { translate } = useLocalization()
  const [isDarkMode] = useDarkMode()

  return ( 
    <div className="grid lg:grid-cols-3 h-full">
      <div
        className="relative bg-no-repeat bg-cover py-6 px-16 flex-col justify-between hidden lg:flex"
        style={{
          backgroundImage: `url('/img/others/auth-side-bg.jpg')`,
        }}
      >
        <div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
        <div className="relative z-10 flex flex-col h-full justify-between">
          <Logo mode={isDarkMode ? 'dark' : 'light'} className="drop-shadow-md" url={ROUTES_ENUM.authenticated.login} />
          <div>
            <div className="mb-6 flex items-center gap-4">
              <Avatar className="border-2 border-white" shape="circle" src="/img/others/cto.png" />
              <div className="text-white">
                <div className="font-semibold text-base">Sedat ÖZTÜRK</div>
                <span className="opacity-80">{ translate('::App.Listform.ListformField.Founder')}</span>
              </div>
            </div>
            <p className="text-lg text-white opacity-80">
              { translate('::App.LoginPanel.Message')}
            </p>
          </div>
          <span className="text-white">
            Copyright &copy; {`${new Date().getFullYear()}`}{' '}
            <span className="font-semibold">{`${APP_NAME}`}</span>{' '}
          </span>
        </div>
      </div>
      <div className="col-span-2 flex flex-col justify-start sm:justify-center items-center bg-white dark:bg-gray-800">
        <div className="w-full xl:max-w-[450px] px-8 max-w-[380px]">
          <div className="mb-8">{content}</div>
          {children
            ? cloneElement(children as React.ReactElement, {
                ...rest,
              })
            : null}
        </div>
      </div>
    </div>
  )
}

export default Side