"use client";

import { useTranslations } from "next-intl";

import { OptimizedImage } from "@/components/ui/optimized-image";
import { placeholderSrc } from "@/lib/placeholder";

export function ImageMakerBeforeAfter() {
  const t = useTranslations("auto.componentsImageMakerImageMakerBeforeAfter");
  return (
    <div className="overflow-hidden rounded-xl border border-gray-100 bg-white shadow-xl">
      <div className="grid grid-cols-2 divide-x divide-gray-100">
        <div className="relative">
          <div className="relative aspect-[4/5] sm:aspect-square">
            <OptimizedImage
              src={placeholderSrc("im-before", 400, 500)}
              alt={t("beforeAlt")}
              fill
              priority
              sizes="(max-width: 1024px) 50vw, 320px"
              className="object-cover grayscale"
            />
          </div>
          <span className="absolute left-3 top-3 rounded-md bg-neutral-900/70 px-2 py-1 text-xs font-semibold text-white backdrop-blur-sm">
            {t("beforeLabel")}
          </span>
        </div>
        <div className="relative">
          <div className="relative aspect-[4/5] sm:aspect-square">
            <OptimizedImage
              src={placeholderSrc("im-after", 400, 500)}
              alt={t("afterAlt")}
              fill
              priority
              sizes="(max-width: 1024px) 50vw, 320px"
              className="object-cover"
            />
          </div>
          <span className="absolute left-3 top-3 rounded-md bg-violet-600 px-2 py-1 text-xs font-semibold text-white">
            {t("afterLabel")}
          </span>
        </div>
      </div>
      <p className="border-t border-gray-100 bg-neutral-50 px-4 py-3 text-center text-xs text-neutral-500">
        {t("caption")}
      </p>
    </div>
  );
}
