---
interface Props {
  title: string;
  subtitle?: string;
  titleOrientation: keyof typeof orientation;
  imagen?: string;
}

const orientation = {
  left: "start",
  middle: "center",
  right: "end",
};

const { title, subtitle, titleOrientation, imagen } = Astro.props;
---

<div class="w-full flex flex-col justify-center items-center my-10">
  <p
    class={`w-3/4 py-2 text-3xl font-bold text-${orientation[titleOrientation]}`}
  >
    {title}
  </p>
  <div class="inline-flex items-center justify-center w-full">
    <hr class="w-full h-px my-4 bg-gray-200 border-0" />
    <span class="absolute px-3 font-medium text-gray-900 bg-stone-100"
      >{subtitle}</span
    >
  </div>
  <div class="w-3/4 items-center">
    <slot />
  </div>
  {
    imagen && (
      <div class="w-full flex flex-row justify-center my-5 gap-5">
        <img src={imagen} class="w-1/4 rounded-md shadow-md shadow-gray-300" />
        <div class="h-62 w-2 bg-amber-800" />
        <div class="flex flex-col gap-4">
          <p class="font-bold text-2xl text-yellow-950">Ganado Sonorense</p>
          <p class="font-semibold text-xl">
            La base de la calidad sonorense es su ganado.
          </p>
        </div>
      </div>
    )
  }
</div>
