<template>
    <div class="project">
        <div class="project-header">
            <h2>{{ projectName }}</h2>
            <div class="project-buttons">
                    <button class="info-btn"><a href="./project-example.html">more infos</a></button>
                    <button class="contact-btn">Contact</button>
            </div>
        </div>
        <div class="project-body">   
            <ul>
                <li v-for="(name, index) in listName" :key="index">{{ name }}</li>
            </ul>    
        </div>
    </div>
</template>


<script lang="ts">
export default {
    name: 'Project',
    props: {
        projectName: String,
        listName: Array as() => String[], //something isn't working
    }
}
</script>

<style scoped>
.project {
    background: linear-gradient(to right, #f4f4f4, #ffffff);
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
  }
  
  /* Header Styling */
  .project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .project-header h2 {
    font-size: 20px;
    color: #333;
    margin: 0;
  }
  
  /* Button Container */
  .project-buttons {
    display: flex;
    gap: 10px;
  }


</style>