/**
 * BackToBlog - Navigation link back to blog listing
 *
 * Editorial-style back link with animated underline.
 */

import Link from "next/link";
import {
  BLOG_COLORS,
  BLOG_STYLES,
  getBlogTranslations,
} from "@/lib/blog.config";

export interface BackToBlogProps {
  /** Language for localization */
  lang: "ar" | "en";
  /** Text direction */
  dir: "ltr" | "rtl";
}

export default function BackToBlog({ lang, dir }: BackToBlogProps) {
  const t = getBlogTranslations(lang);

  return (
    <div className="max-w-4xl mx-auto lg:mx-0 mb-12">
      <Link
        href={`/${lang}/blog`}
        className="group inline-flex items-center gap-3 transition-colors duration-300"
        style={{ color: BLOG_COLORS.body }}
      >
        <svg
          className={`w-5 h-5 transition-transform duration-300 ${
            dir === "rtl"
              ? "rotate-180 group-hover:translate-x-1"
              : "group-hover:-translate-x-1"
          }`}
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth={2}
            d="M15 19l-7-7 7-7"
          />
        </svg>
        <span className="font-medium group-hover:text-[#10B981]">
          {t.backToBlog}
        </span>
        <div className={BLOG_STYLES.hoverUnderline} />
      </Link>
    </div>
  );
}