---
import { getLangFromUrl } from "@/lib/utils/i18nUtils";
import { plainify } from "@/lib/utils/textConverter";
import ImageMod from "./ImageMod.astro";
import Social from "./Social.astro";
import config from "@/config/config.json";
const { default_language } = config.settings;

const { data } = Astro.props;
const { title, image, social } = data.data;
const lang = getLangFromUrl(Astro.url);
---

<div
  class="rounded bg-theme-light p-8 text-center dark:bg-darkmode-theme-light"
>
  {
    image && (
      <ImageMod
        class="mx-auto mb-6 rounded"
        src={image}
        alt={title}
        width={120}
        height={120}
        format="webp"
      />
    )
  }
  <h4 class="mb-3">
    <a
      href={`/${lang === default_language ? "authors" + "/" : lang}/${data.slug}`}
      >{title}</a
    >
  </h4>
  <p class="mb-4">
    {plainify(data.body?.slice(0, 100))}
  </p>
  <Social source={social} className="social-icons" />
</div>