import Main from "@/templates/Main"
import RecentEdits from "@/containers/RecentEdits"
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"

import { Button } from "@/components/ui/button"
export default function Home() {
	return (
		<>
			<Main pageTitle="Home">
				<div className="flex-1 flex flex-col overflow-auto">
					<div className="@container/main flex flex-col">
						<div className="p-4 lg:p-6 flex flex-1">
							<div className="border w-full">
								<div className="border-b py-2 px-4 lg:px-6 bg-sidebar">
									<h2 className="scroll-m-20 font-semibold">Welcome</h2>
								</div>
								<div className="p-4 lg:p-6">
									<p className="leading-7 [&:not(:first-child)]:mt-6 font-normal">
										<HoverCard>
											<HoverCardTrigger asChild>
												<Button
													variant="outline"
													size="sm"
													className="rounded-none mr-1 font-normal text-base"
												>
													Eólas
												</Button>
											</HoverCardTrigger>
											<HoverCardContent className="w-70 rounded-none">
												<div className="flex justify-between gap-4">
													<div className="space-y-1">
														<h4 className="text-sm font-semibold">🇮🇪</h4>
														<p className="text-sm">
															Irish for "knowledge", especially knowledge gained
															through practical experience.
														</p>
													</div>
												</div>
											</HoverCardContent>
										</HoverCard>
										is{" "}
										<a
											className="text-foreground underline-offset-3 font-medium underline hover:text-gray-700 dark:hover:text-green-300"
											href="#"
										>
											my
										</a>{" "}
										technical knowledge management system, or "second-brain", comprising
										notes from the study of software engineering and computer science.
									</p>
								</div>
							</div>
						</div>

						{/*
									
									<div className="bg-muted rounded-none p-3 font-medium text-sm text-muted-foreground my-4 mb-6">
										<p className="">
											{" "}
											<span className="mr-2">🇮🇪</span> "Eólas" is Irish for "knowledge",
											especially knowledge gained through practical experience.
										</p>
									</div>


I'm
                              <a
                                 className="text-black underline-offset-3 font-medium underline hover:text-gray-700"
                                 href="#"
                              >
                                 Thomas
                              </a>
                              .


									*/}
						<div className="px-4 lg:px-6 flex-1 flex">
							<RecentEdits />
						</div>
					</div>
				</div>
			</Main>
		</>
	)
}
