export type StoryItemType = {
    title: string;
    description: string;
    image: string;
    epochTime?: string,
    epochTitle?: string,
    epochDescription?: string
    link?: string,
    paddingedImage?: boolean
};


type StoryItemProps = {
    mirrored?: boolean,
    item: StoryItemType
}

export const StoryItem = (props: StoryItemProps) => {
    return (
        <div class="p-6 group inline-block w-full relative">
            <div class="h-full flex-1 delay-75 flex flex-col justify-between group-hover:scale-[1.01] transition-all shadow-md shadow-gray-400 border-2 border-zinc-800 rounded-md py-3 px-6">
                <div>
                    <p class="text-lg font-bold">{props.item.title}</p>
                    <p class="w-1/2">{props.item.description}</p>
                </div>
                {props.item.epochTime && <p class="font-mono text-zinc-500 font-bold pt-3">{props.item.epochTime}</p>}

            </div>
            <div class="shadow-md rounded-md delay-75 group-hover:scale-105 transition-all items-center overflow-hidden flex justify-center shadow-gray-500 right-2 top-1 bg-gradient-to-br from-emerald-600 to-emerald-500 md:w-32 xl:w-36 w-20 aspect-square absolute">
                {props.item.image && <a class={`h-full w-full ${props.item.paddingedImage && 'p-6'}`} href={props.item.link && ''}><img class="h-auto w-full object-cover" src={props.item.image} alt="" /></a>}
            </div>
        </div>
    )
}