/**
 * ExcerptCallout - TL;DR excerpt callout box
 *
 * Displays a summary/excerpt of the blog post in a styled callout.
 */

import { BLOG_COLORS, getBlogTranslations } from "@/lib/blog.config";

export interface ExcerptCalloutProps {
  /** The excerpt text */
  excerpt: string;
  /** Language for localization */
  lang: "ar" | "en";
}

export default function ExcerptCallout({ excerpt, lang }: ExcerptCalloutProps) {
  const t = getBlogTranslations(lang);

  if (!excerpt) {
    return null;
  }

  return (
    <div className="mb-16 max-w-4xl mx-auto lg:mx-0">
      <div
        className="p-8 border-l-4"
        style={{
          backgroundColor: BLOG_COLORS.bgSecondary,
          borderLeftColor: BLOG_COLORS.primary,
        }}
      >
        <div className="flex items-start gap-4">
          <span
            className="font-mono text-sm"
            style={{ color: BLOG_COLORS.primary }}
            dir="ltr"
          >
            {t.tldr}
          </span>
          <p style={{ color: BLOG_COLORS.body }} className="leading-relaxed">
            {excerpt}
          </p>
        </div>
      </div>
    </div>
  );
}