---
import Tiempo_2025_Londres from './Tiempo_2025_Londres.astro';

const {
    imageAuthor,
    imageAuthorAlt,
    nameAuthor,
    urlAuthor, // Opcional: si llega, el nombre del autor se renderiza como enlace
    descriptionAuthor,
    minutes = "20", // Opciones: "5", "10", etc.
    borderRadius = "", // Opciones: "48px", "sm", "md", "lg", "full"
    full = true, // Si es true, la imagen ocupará todo el ancho disponible
    imageSize = 240, // Tamaño máximo de la imagen en px
} = Astro.props;

const roundedClassMap: Record<string, string> = {
    "": "",
    "sm": "rounded-sm",
    "md": "rounded-md",
    "lg": "rounded-lg",
    "full": "rounded-full",
    "48px": "rounded-[48px]",
};
const roundedClass = roundedClassMap[borderRadius] ?? "";

const sizeClassMap: Record<number, string> = {
    24: "max-w-[24px] max-h-[24px]",
    48: "max-w-[48px] max-h-[48px]",
    60: "max-w-[60px] max-h-[60px]",
    120: "max-w-[120px] max-h-[120px]",
    160: "max-w-[160px] max-h-[160px]",
    180: "max-w-[180px] max-h-[180px]",
    200: "max-w-[200px] max-h-[200px]",
    240: "max-w-[240px] max-h-[240px]",
};
const sizeClass = sizeClassMap[imageSize] ?? "max-w-[240px] max-h-[240px]";



---

{full ? (
    <div class="w-full md:w-[596px] flex flex-row items-center gap-3 px-0 md:px-0">
        <div class="w-1/2 md:w-2/3 flex h-auto items-center self-stretch gap-4">
            <div class="flex flex-col items-center justify-center gap-2">
                <img src={imageAuthor} alt={imageAuthorAlt} width={imageSize} height={imageSize} class={`w-full md:w-[48px] aspect-square object-cover rounded-full`} loading="lazy">
            </div>

            <div class="w-full h-auto flex items-center self-stretch">
                <div class="w-full flex flex-col items-start gap-2">
                    <p class="font-inter text-[#262626] text-base font-normal leading-6 underline">
                        {urlAuthor
                            ? <a href={urlAuthor} class="hover:opacity-80 transition-opacity" set:html={nameAuthor}></a>
                            : <Fragment set:html={nameAuthor} />}
                    </p>
                    <p class="font-inter text-[#363942] text-sm font-normal leading-5" set:html={descriptionAuthor}></p>
                </div>
            </div>
        </div>
        {minutes && <Tiempo_2025_Londres minutes={minutes} />}
    </div>

) : (

    <div class="w-full md:w-[596px] flex flex-row items-center gap-3 px-8 md:px-0">
        <div class="w-1/2 md:w-2/3 flex h-auto items-center self-stretch gap-4">
            <div class="flex flex-col items-center justify-center gap-2">
                <img src={imageAuthor} alt={imageAuthorAlt} width={imageSize} height={imageSize} class={`min-w-[48px] w-full md:w-auto aspect-square object-cover ${roundedClass} ${sizeClass}`} loading="lazy">
            </div>
            
            <div class="w-full h-auto flex items-center self-stretch">
                <div class="w-full flex flex-col items-start gap-2">
                    <p class="font-inter text-[#262626] text-base font-normal leading-6 underline">
                        {urlAuthor
                            ? <a href={urlAuthor} class="hover:opacity-80 transition-opacity" set:html={nameAuthor}></a>
                            : <Fragment set:html={nameAuthor} />}
                    </p>
                    <p class="font-inter text-[#363942] text-sm font-normal leading-5" set:html={descriptionAuthor}></p>
                </div>
            </div>
        </div>
        {minutes && <Tiempo_2025_Londres minutes={minutes} />}
    </div>
)}