---
import {Markdown} from 'astro/components'
import formatName from './function/format-name.js'
const {data:{name,pkgJSON:{description}}} = Astro.props
---
   <!-- Example 1  -->
<!-- <div class="thumbnail">
        
        <a href={`/example/${name}`}>
            <h3>{formatName(name)}
            </h3>
            <img src="/default-og-image.png" alt="">
        </a>

        <pre data-lang='bash'>--template {name}</pre>
</div> -->

<!-- Example 2 -->
<!-- <div class="thumbnail">
        
        <a href={`/example/${name}`}>
            <img src="/default-og-image.png" alt="">
            <h3>{formatName(name)}
            </h3>
        </a>
        <pre data-lang='bash'>--template {name}</pre>
</div> -->

<!-- Example 3 -->
<div class="wrapper">
    <div class="thumbnail">
            <div class="title">
                <a href={`/example/${name}`}>
                    <h3 >{formatName(name)}
                    </h3>
                </a>
                <code class="code-inline">{name}</code>
            </div>
            <p class="description">{description}</p>
            <pre data-lang='bash' class="code-block">--template {name}</pre>
    </div>
</div>

<style lang="scss">
    .wrapper{
        box-sizing: border-box;
        width: 45%;
        display:flex;
        flex-direction:column;

        border-radius: 5rem;
        box-shadow:  2px 2px 2px #cacaca;
    }
    .thumbnail{
        flex-basis:1;
        flex-grow: 1;
        transition: all 0.25s ease-out ;
        transform: perspective(1000rem); //hack but needed,
        &:hover{
            transform: scale(1.015);
        }
        > a h3{
            margin:0.5rem;
        }
        > a img{
            margin-top:0.5rem;
            border-radius: 1rem;
        }
        > a{
            color:var(--theme-accent)
        }
        >p{
            word-break: keep-all;
            white-space: wrap;
            overflow: hidden;
            text-overflow: ellipsis
        }
        > pre{
            width:99%;
            margin-top: 0.85rem;
            margin-left:0;
            overflow: auto;

            &::-webkit-scrollbar{
                height:10px;
                background-color: #383740;
                color:white;
                
            }
            &::-webkit-scrollbar-track{
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);   
            }
            &::-webkit-scrollbar-thumb {
                width: 25%;
                background-color: darkgrey;
                outline: 1px solid slategrey;
                border-radius: 5rem;
            }
        }
    
        .title{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-items: baseline;
            > * + * {
                margin-inline-start: 0.5rem;
            }

        }
    }
    @media(max-width:603px){
        .thumbnail{
            width: 100%;
            height: fit-content;
            >pre{
                border-radius:0.5rem;
                overflow: auto;
            }
        }
    }
         

</style>