import { LogIn } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

export default function Home() {
  return (
    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-center">
        <Image
          className="dark:invert"
          src="/logo.png"
          alt="Shomal Amol Hospital"
          width={280}
          height={48}
          priority
        />
        <h4 className="mb-1 tracking-[-.01em] font-bold text-xl">
          پنل مدیریت سایت بیماران بین الملل
        </h4>
        {/* <p className="tracking-[-.01em]">
          یکی از دکمه های زیر را فشار دهید
        </p> */}

        <div className="flex gap-4 items-center flex-col sm:flex-row">
          <Link
            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
            href="/dashboard"
            
            rel="noopener noreferrer"
          >
            <LogIn />
            ورود به پنل
          </Link>
          <a
            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[200px]"
            href="https://ipd.shomalhospital.com"
            target="_blank"
            rel="noopener noreferrer"
          >
            مشاهده وب سایت
          </a>
        </div>
      </main>
      
    </div>
  );
}
