/**
 * EmptyState - Empty blog posts state component
 *
 * Displayed when no blog posts are available,
 * with localized messaging.
 */

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

export interface EmptyStateProps {
  /** Language for localization */
  lang: "ar" | "en";
}

export default function EmptyState({ lang }: EmptyStateProps) {
  const t = getBlogTranslations(lang);

  return (
    <div className="text-center py-20 bg-[#FAFAFA]">
      <div className="flex items-center justify-center gap-3 mb-6">
        <span
          className="font-mono text-sm"
          style={{ color: BLOG_COLORS.primary }}
          dir="ltr"
        >
          !
        </span>
        <div className="w-12 h-px bg-slate-200" />
      </div>
      <h3
        className="text-2xl font-bold mb-3"
        style={{ color: BLOG_COLORS.heading }}
      >
        {t.noPostsFound}
      </h3>
      <p style={{ color: BLOG_COLORS.body }}>{t.noPostsDescription}</p>
    </div>
  );
}