import { UILink } from '@/components/ui';
import { ChevronRight } from 'lucide-react';
import Image from 'next/image';

export const Card3 = () => {
  return (
    <div className="lg:bg-foreground relative flex max-lg:flex-col max-lg:gap-2 lg:w-[70%] lg:min-w-264.25">
      <div className="lg:w-155.75">
        <Image
          src={'/images/home-third-card.webp'}
          alt=""
          width={1054}
          height={618}
          className="object-cover"
        />
      </div>
      <div className="flex flex-1 items-center justify-center">
        <div className="space-y-4 max-lg:px-4 lg:max-w-3/4">
          <p className="font-thin italic">
            Ofrecemos solo lo mejor para quienes buscan no conformarse con lo común
          </p>
          <UILink
            href={'/modelos'}
            aria-label="Ver más modelos de vehículos"
            className="show-on-mobile flex items-center gap-1"
          >
            <span>VER MÁS</span> <ChevronRight className="h-5 w-3.5" />
          </UILink>
        </div>
      </div>
      <div className="show-on-desktop absolute right-14.25 bottom-10.75">
        <UILink
          href={'/modelos'}
          aria-label="Ver más modelos de vehículos"
          className="flex items-center gap-1"
        >
          <span>VER MÁS</span> <ChevronRight className="h-5 w-3.5" />
        </UILink>
      </div>
    </div>
  );
};