import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import Image from 'next/image';
import Link from 'next/link';

export default function Home() {
  return (
    <div className="grid place-items-center h-screen">
      <main className="font-[family-name:var(--font-geist-sans)]">

        <header className="text-center">
          <h1 className="text-9xl font-mono">
            Sergey Krylov
          </h1>

          <h2 className="text-4xl text-slate-500 font-mono">
            Fronted Software Engineer
          </h2>

          <h3 className="text-2xl text-slate-400 font-mono">
            @ksv741
          </h3>
        </header>

        <div className="grid grid-cols-2 grid-rows-2 gap-16 h-64 mt-8">
          <div className="flex justify-center items-center">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button className="w-[100px] cursor-pointer" variant="outline">Contacts</Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuLabel>My Communications</DropdownMenuLabel>
                <DropdownMenuSeparator/>
                <Link href="https://t.me/ksv741" target="_blank">
                  <DropdownMenuItem>
                    <Image src="/icons/telegram.svg" alt="docx icon" height={16} width={16} className="grayscale"/>
                    Telegram: <span className="text-slate-500">@ksv741</span></DropdownMenuItem>
                </Link>

                <Link href="mailto:ksv741@mail.ru" target="_blank">
                  <DropdownMenuItem>
                    <Image src="/icons/email.svg" alt="docx icon" height={16} width={16} className="grayscale"/>
                    Email: <span className="text-slate-500">ksv741@mail.ru</span></DropdownMenuItem>
                </Link>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

          <div className="flex justify-center items-center">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button className="w-[100px] cursor-pointer" variant="outline">CV</Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuLabel>Download CV</DropdownMenuLabel>
                <DropdownMenuSeparator/>
                <Link href="/docs/Крылов%20Сергей,%20Frontend%20Developer.pdf">
                  <DropdownMenuItem>
                    <Image src="/icons/pdf.svg" alt="pdf icon" height={16} width={16} className="grayscale"/>
                    PDF
                  </DropdownMenuItem>
                </Link>

                <Link href="/docs/Крылов%20Сергей,%20Frontend%20Developer.docx">
                  <DropdownMenuItem>
                    <Image src="/icons/docx.svg" alt="docx icon" height={16} width={16} className="grayscale"/>
                    DOCX
                  </DropdownMenuItem>
                </Link>

                <Link href="https://docs.google.com/document/d/1lTTFHZ43FQdXHG_cvmHvi2hpSxAVLsI0iM7Xj9VvxAI/edit?usp=sharing" target="_blank">
                  <DropdownMenuItem>
                    <Image src="/images/google-docs.png" alt="google docx icon" height={16} width={16} className="grayscale"/>
                    Google Docs
                  </DropdownMenuItem>
                </Link>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>

          <div className="flex justify-center items-center">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button className="w-[100px]  cursor-pointer" variant="outline">Portfolio</Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuLabel>Review my projects</DropdownMenuLabel>
                <DropdownMenuSeparator/>

                <Link href="https://github.com/ksv741" target="_blank">
                  <DropdownMenuItem>
                    <Image src="/icons/github.svg" alt="asd" height={16} width={16} className="grayscale"/>
                    GitHub
                  </DropdownMenuItem>
                </Link>

              </DropdownMenuContent>
            </DropdownMenu>
          </div>

          <div className="flex justify-center items-center">
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button className="w-[100px] cursor-pointer" variant="outline">Socials</Button>
              </DropdownMenuTrigger>
              <DropdownMenuContent>
                <DropdownMenuLabel>Follow me</DropdownMenuLabel>
                <DropdownMenuSeparator/>

                <Link href="https://www.linkedin.com/in/ksv741/" target="_blank">
                  <DropdownMenuItem>
                    <Image src="/icons/linkedin.svg" alt="asd" height={16} width={16} className="grayscale"/>
                    LinkedIn
                  </DropdownMenuItem>
                </Link>

                <Link href="https://hh.ru/resume/88074b52ff03b7510c0039ed1f59506946356b?hhtmFrom=resume_list" target="_blank">
                  <DropdownMenuItem>
                    <Image src="/images/hh.png" alt="asd" height={16} width={16} className="grayscale"/>
                    hh
                  </DropdownMenuItem>
                </Link>

                <Link href="https://career.habr.com/ksv741" target="_blank">
                  <DropdownMenuItem>
                    <Image src="/images/habr.png" alt="asd" height={16} width={16} className="grayscale"/>
                    HabrCareer </DropdownMenuItem>
                </Link>

                <Link href="https://set.ki/A37AYUp" target="_blank">
                  <DropdownMenuItem>
                    <Image src="/images/setka.png" alt="asd" height={16} width={16} className="grayscale"/>
                    Setka
                  </DropdownMenuItem>
                </Link>
              </DropdownMenuContent>
            </DropdownMenu>
          </div>
        </div>
      </main>
    </div>
  );
}