<script setup>
import '@archr-se/score-card'

const scoreA = {
  overall_score: 8.4,
  aspect_scores: [
    { aspect: { name: 'Circularity' }, value: 7.9 },
    { aspect: { name: 'Climate' }, value: 8.8 },
    { aspect: { name: 'Ecosystem' }, value: 7.4 },
    { aspect: { name: 'Social & Governance' }, value: 8.1 },
    { aspect: { name: 'Transparency' }, value: 8.6 },
  ],
}

const scoreB = {
  overall_score: 4.9,
  aspect_scores: [
    { aspect: { name: 'Circularity' }, value: 4.1 },
    { aspect: { name: 'Climate' }, value: 5.0 },
    { aspect: { name: 'Transparency' }, value: 5.4 },
  ],
}
</script>

<template>
  <div>
    <h1>Product Score Component Demo</h1>

    <product-score :score-data="JSON.stringify(scoreA)"></product-score>

    <h2>Small Component Example</h2>
    <product-score :score-data="JSON.stringify(scoreB)" size="small"></product-score>

    <h2>Invalid Data Example (component remains hidden)</h2>
    <product-score score-data='{"overall_score":"not-a-number"}'></product-score>
  </div>
</template>