import { Grade } from 'papillon-ui';

<Grade
  title="Mathematics Test"
  date={Date.now()}
  score={16.5}
  outOf={20}
  color="#4A90E2"
  onPress={() => {}}
/>

<Grade
  title="Physics Quiz"
  date={Date.now()}
  score={18}
  outOf={20}
  color="#10B981"
  onPress={() => showDetails()}
/>

<Grade
  title="Upcoming Test"
  date={Date.now()}
  score={0}
  outOf={20}
  disabled
  status="Non noté"
  color="#6B7280"
/>

function GradeList({ grades }) {
  return (
    <View>
      {grades.map((grade, index) => (
        <Grade
          key={grade.id}
          isFirst={index === 0}
          isLast={index === grades.length - 1}
          title={grade.title}
          date={grade.date}
          score={grade.score}
          outOf={grade.outOf}
          color={grade.color}
          onPress={() => navigate('GradeDetail', { id: grade.id })}
        />
      ))}
    </View>
  );
}

<Grade
  title=""
  date={Date.now()}
  score={0}
  outOf={20}
  skeleton
/>