import '@archr-se/score-card'

function App() {
  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 },
    ],
  }

  return (
    <>
      <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>
    </>
  )
}

export default App