# Course Rating Package

Required course rating modal and display components for ReactJS and React Native.

## Entrypoints

```ts
import { 
  CourseRating, 
  CourseRatingSummary, 
  CourseRatingScore,
  StarRating 
} from "@imamasari1/course-rating/reactjs";

import { CourseRating as NativeCourseRating } from "@imamasari1/course-rating/reactnative";
```

Shared helpers and types:

```ts
import type { 
  CourseRatingSubmitPayload,
  CourseRatingSummaryData 
} from "@imamasari1/course-rating/shared";
```

## Components

### 1. CourseRating (Modal)
The main modal for submitting course ratings.

```tsx
<CourseRating
  data={needRatingData}
  onSubmitRating={async (payload) => {
    await api.submit(payload);
  }}
/>
```

### 2. CourseRatingSummary
Display component for rating distribution (perfect for Rating Tabs).

```tsx
<CourseRatingSummary
  data={{
    averageRating: 4.8,
    totalRatings: 153,
    distribution: [
      { stars: 5, percentage: 78 },
      { stars: 4, percentage: 18 },
      { stars: 3, percentage: 3 },
      { stars: 2, percentage: 1 },
      { stars: 1, percentage: 1 },
    ]
  }}
/>
```

### 3. CourseRatingScore
Compact display for stars and numeric score (perfect for Course Lists/Cards).

```tsx
<CourseRatingScore 
  score={4.8} 
  totalRatings={153} 
  size={18} 
/>
```

## CSS Requirement
For ReactJS, ensure you import the styles:

```ts
import "@imamasari1/course-rating/reactjs.css";
```

See `PRD.md` for product behavior and `TODO.md` for implementation progress.

