import { AppRouterOutput } from "@/server/trpc/types";
import Link from "next/link";

type CityChange = AppRouterOutput["citychange"]["paginate"]["items"];

export default function CityChangeMainBlock({ items }: { items: CityChange }) {
    if (!items?.length) return;

    return (
        <section className="border-y border-y-neutral-400 bg-neutral-100">
            <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 leading-none font-bold text-[#CBCBCB] md:text-3xl">citychange</h2>
                    </div>
                    <div className="w-full">
                        <div className="grid grid-cols-1 gap-5 lg:grid-cols-3 lg:gap-10">
                            {items.map((item, index) => (
                                <article
                                    key={index}
                                    className="relative flex flex-col border-b before:absolute before:top-0 before:-right-5 before:h-full before:w-0 before:bg-gray-300 last:before:w-0 lg:border-0 lg:before:w-px"
                                >
                                    <div className="mb-8 flex flex-col gap-1">
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="19.944"
                                            height="23.904"
                                            viewBox="0 0 19.944 23.904"
                                        >
                                            <g id="Group_65" data-name="Group 65" transform="translate(-773.018 -650)">
                                                <g id="cc-logo-no_text" transform="translate(773.018 650)">
                                                    <g id="Group_66" data-name="Group 66" transform="translate(0 0)">
                                                        <path
                                                            id="Path_7"
                                                            data-name="Path 7"
                                                            d="M135.7,117.692a3.256,3.256,0,1,1,3.256-3.256A3.257,3.257,0,0,1,135.7,117.692Z"
                                                            transform="translate(-125.592 -104.299)"
                                                            fill="#223840"
                                                        />
                                                        <g id="Group_191" data-name="Group 191">
                                                            <path
                                                                id="Path_6"
                                                                data-name="Path 6"
                                                                d="M64.064,42.492a9.986,9.986,0,0,1,17.05,7.078,9.615,9.615,0,0,1-2.576,6.7.475.475,0,0,1-.775.029l-3.275-3.353a.333.333,0,0,1,0-.523,4.168,4.168,0,0,0,1.069-2.834,3.836,3.836,0,0,0-1.269-2.938,4.331,4.331,0,0,0-3.053-1.174,4.189,4.189,0,0,0-3.011,1.187,3.9,3.9,0,0,0-1.248,2.947,4.186,4.186,0,0,0,1.008,2.813.347.347,0,0,1-.02.543l-3.358,3.362a.47.47,0,0,1-.748-.029,9.31,9.31,0,0,1-2.688-6.732,9.9,9.9,0,0,1,2.9-7.078Z"
                                                                transform="translate(-61.17 -39.57)"
                                                                fill="#223840"
                                                            />
                                                            <path
                                                                id="Path_8"
                                                                data-name="Path 8"
                                                                d="M109.131,195.043a.4.4,0,0,1-.563,0l-5.66-5.66a.4.4,0,0,1,0-.563l3.427-3.428a.4.4,0,0,1,.563,0l1.669,1.669a.4.4,0,0,0,.563,0l1.692-1.692a.4.4,0,0,1,.563,0l3.428,3.427a.4.4,0,0,1,0,.563l-5.684,5.685Z"
                                                                transform="translate(-98.793 -171.254)"
                                                                fill="#223840"
                                                            />
                                                        </g>
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                        <span className="text-sm font-bold text-cyan-950">{item.address.street}</span>
                                    </div>
                                    <span className="text-sm text-neutral-600 uppercase">{item.slug}</span>
                                    <h3 className="mb-4 text-xl leading-[1.1] font-bold text-neutral-900">
                                        <Link
                                            href={item.url}
                                            className="before:absolute before:top-0 before:left-0 before:z-1 before:block before:size-full hover:underline"
                                        >
                                            {item.title}
                                        </Link>
                                    </h3>
                                    <p className="text-client-sky mt-auto mb-4 text-6xl font-bold">{item.rate || 0}%</p>
                                </article>
                            ))}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}