"use client"

import { ChatbotUISVG } from "@/components/icons/chatbotui-svg"
import { IconArrowRight } from "@tabler/icons-react"
import { useTheme } from "next-themes"
import Link from "next/link"

import HomeRedirector from "@/components/utility/home-redirector"
import { LanguageSwitcher } from '@/components/ui/language-switcher'

import { useTranslation } from "react-i18next"

export default function HomePage() {
  const { theme } = useTheme()
  const { t } = useTranslation()

  return (
    <div className="flex size-full flex-col items-center justify-center relative">

      <HomeRedirector />
      <LanguageSwitcher />

      <div>
        <ChatbotUISVG theme={theme === "dark" ? "dark" : "light"} scale={0.3} />
      </div>

      <div className="mt-2 text-4xl font-bold">{t("Company Name")}</div>

      <Link
        className="mt-4 flex w-[200px] items-center justify-center rounded-md bg-blue-500 p-2 font-semibold"
        href="/login"
      >
        {t("Clock In")}
        <IconArrowRight className="ml-1" size={20} />
      </Link>
    </div>
  )
}