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

interface CoverProps extends CommonProps {
  content?: ReactNode
}

const Cover = ({ children, content, ...rest }: CoverProps) => {
  const { translate } = useLocalization()

  return (
    <div className="grid lg:grid-cols-3 h-full">
      <div
        className="col-span-2 bg-no-repeat bg-cover py-6 px-16 flex-col justify-between dark:bg-gray-800 hidden lg:flex relative"
        style={{
          backgroundImage: `url('/img/others/auth-cover-bg.jpg')`,
        }}
      >
        {/* Koyulaştırıcı katman */}
        <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="dark" 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('::LoginPanel.Profil')}</span>
              </div>
            </div>
            <p className="text-lg text-white opacity-80">{translate('::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="flex flex-col 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 ReactElement, { ...rest }) : null}
        </div>
      </div>
    </div>
  )
}


export default Cover