---
interface Props {
    minutes: string;
}

const { minutes } = Astro.props;
---

<div class="w-1/2 md:w-1/3 h-auto flex items-center self-stretch border-l border-r border-[#B6B7BB]">
    <div class="w-full flex flex-col items-center gap-1">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
            <path d="M15.9998 8.00002V16L21.3332 18.6667M15.9998 2.66669C12.4636 2.66669 9.07223 4.07144 6.57175 6.57193C4.07126 9.07242 2.6665 12.4638 2.6665 16C2.6665 19.5362 4.07126 22.9276 6.57175 25.4281C9.07223 27.9286 12.4636 29.3334 15.9998 29.3334C19.5361 29.3334 22.9274 27.9286 25.4279 25.4281C27.9284 22.9276 29.3332 19.5362 29.3332 16C29.3332 12.4638 27.9284 9.07242 25.4279 6.57193C22.9274 4.07144 19.5361 2.66669 15.9998 2.66669Z" stroke="#363942" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <p class="font-inter text-[#363942] text-center text-sm font-normal leading-5">{minutes} min</p>
    </div>
</div>