"use client";

import { ArrowRightIcon } from "lucide-react";

const SplayCard: React.FC = () => (
  <div
    className="group flex w-80 scale-80 flex-col gap-4 overflow-hidden rounded-4xl bg-white p-6 shadow-[#c2c2c23d] shadow-xl duration-400 hover:scale-81 motion-reduce:duration-0 md:w-100"
    role="group"
  >
    <h1
      aria-label="Speedway Race"
      className="group-hover:shimmer motion-reduce:shimmer-none shimmer-color-[#696969] shimmer-duration-3000 font-bold text-[#101010] text-[32px] leading-auto transition-all duration-0 group-hover:duration-400 motion-reduce:duration-0 md:text-[60px] md:leading-20"
    >
      Speedway <br />{" "}
      <div className="flex items-center gap-2">
        Race{" "}
        <div className="grid overflow-hidden">
          <div className="-translate-x-full transition-transform duration-400 [grid-area:1/1] group-hover:translate-x-0 motion-reduce:duration-0">
            <ArrowRightIcon className="size-8 md:size-15" />
          </div>
          <div
            aria-hidden={true}
            className="translate-x-0 transition-transform duration-400 [grid-area:1/1] group-hover:translate-x-full motion-reduce:duration-0"
          >
            <ArrowRightIcon className="size-8 md:size-15" />
          </div>
        </div>
      </div>
    </h1>
    <ul aria-label="Card images" className="flex h-24 w-full md:h-32">
      <li className="h-full">
        {/* biome-ignore lint/performance/noImgElement: usable also within react */}
        {/* biome-ignore lint/correctness/useImageSize: no need */}
        <img
          alt="Img 1"
          className="aspect-1/1.25 h-full rounded-[26px] border-4 border-white shadow-gray/10 shadow-lg transition-transform duration-400 group-hovter:rotate-6 motion-reduce:duration-0 md:border-6"
          src="https://picsum.photos/200/300"
        />
      </li>
      <li className="ml-[-20%] h-full">
        {/* biome-ignore lint/performance/noImgElement: usable also within react */}
        {/* biome-ignore lint/correctness/useImageSize: no need */}
        <img
          alt="Img 2"
          className="aspect-1/1.25 h-full origin-[20%_20%] rounded-[26px] border-4 border-white shadow-gray/10 shadow-lg transition-transform duration-400 group-hover:translate-x-[55%] group-hover:-rotate-18 motion-reduce:duration-0 md:border-6"
          src="https://picsum.photos/200/300"
        />
      </li>
      <li className="ml-[-20%] h-full">
        {/* biome-ignore lint/performance/noImgElement: usable also within react */}
        {/* biome-ignore lint/correctness/useImageSize: no need */}
        <img
          alt="Img 3"
          className="aspect-1/1.25 h-full origin-[0%_-10%] rounded-[26px] border-4 border-white shadow-gray/10 shadow-lg transition-transform duration-400 group-hover:translate-x-[95%] group-hover:-rotate-40 motion-reduce:duration-0 md:border-6"
          src="https://picsum.photos/200/300"
        />
      </li>
    </ul>
    <ul
      aria-label="Race details"
      className="group-hover:shimmer shimmer-color-[#4e4d4d] motion-reduce:shimmer-none shimmer-duration-2000 mt-4 flex items-center gap-4 font-semibold text-[#8e8e8e] text-[12px] md:text-[14px]"
    >
      <li>2 Hours</li>
      <li>180 KM</li>
      <li>12° Climb</li>
    </ul>
    <p className="shimmer-duration-3000 group-hover:shimmer shimmer-color-[#4e4d4d] shimmer-spread-32 motion-reduce:shimmer-none text-[#8e8e8e] text-[14px] md:text-[18px]">
      Racing on a speedway demands precision and nerve, pushing every corner to
      the absolute limit.
    </p>
  </div>
);

export { SplayCard };