import Link from "next/link";
import { Routes } from "@/config/routes";
import MapWrapper from "@/components/shared/map/map-wrapper";
import { AppRouterOutput } from "@/server/trpc/types";

type Markers = NonNullable<AppRouterOutput["posts"]["getGeolocations"]>;

export default function MapMainBlock({ data }: { data: Markers }) {
    return (
        <section className="bg-neutral-200">
            <div className="mx-auto w-full max-w-[1362px] p-3 md:p-[30px]">
                <div className="flex flex-col xl:flex-row">
                    <div className="w-68 shrink-0">
                        <h2 className="mb-4 text-xl font-bold text-neutral-400 md:text-3xl">kortet</h2>
                    </div>
                    <div className="w-full">
                        <div className="h-[400px]">
                            <MapWrapper data={data} popupType="small" />
                        </div>
                        <Link
                            href={Routes.MAP}
                            className="text-client-red relative mt-3 flex w-fit items-center gap-1 text-sm tracking-wide"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 512 512"
                                className="size-3 shrink-0"
                                fill="currentColor"
                            >
                                <path d="M256 8c137 0 248 111 248 248S393 504 256 504 8 393 8 256 119 8 256 8zm-28.9 143.6l75.5 72.4H120c-13.3 0-24 10.7-24 24v16c0 13.3 10.7 24 24 24h182.6l-75.5 72.4c-9.7 9.3-9.9 24.8-.4 34.3l11 10.9c9.4 9.4 24.6 9.4 33.9 0L404.3 273c9.4-9.4 9.4-24.6 0-33.9L271.6 106.3c-9.4-9.4-24.6-9.4-33.9 0l-11 10.9c-9.5 9.6-9.3 25.1.4 34.4z" />
                            </svg>
                            <span className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline">
                                stort kort
                            </span>
                        </Link>
                    </div>
                </div>
            </div>
        </section>
    );
}