---
// Port of preview/pages/stars-rating.html (layout: default)
import DefaultLayout from '@shared/layouts/DefaultLayout.astro';
import Rating from '@shared/components/ui/Rating.astro';
---

<DefaultLayout
	title="Star Ratings"
	pageHeader="Star Ratings"
	pageMenu="base.stars-rating"
	pageLibs={['tabler-flags', 'star-rating.js']}
>
	<div class="row row-cards">
		<div class="col-md-4">
			<div class="row row-cards">
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<div class="h3 card-title">Basic</div>
							<div><Rating value={4} /></div>
						</div>
					</div>
				</div>
				<div class="col-12">
					<div class="card">
						<div class="card-body">
							<div class="h3 card-title">Different icon</div>
							<div class="space-y">
								<Rating value={4} />
								<Rating icon="heart" value={4} color="red" />
								<Rating icon="ghost" value={4} color="azure" />
								<Rating icon="circle" value={4} color="green" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card">
				<div class="card-body">
					<div class="h3 card-title">Custom colors</div>
					<div class="space-y">
						<Rating id="color" value={3} />
						<Rating id="color-primary" color="primary" value={3} />
						<Rating id="color-red" color="red" value={3} />
						<Rating id="color-lime" color="lime" value={3} />
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="card">
				<div class="card-body">
					<div class="h3 card-title">Custom sizes</div>
					<div class="space-y">
						<Rating id="size-sm" value={3} size="sm" />
						<Rating id="size-primary" value={3} />
						<Rating id="size-md" value={3} size="md" />
						<Rating id="size-lg" value={3} size="lg" />
					</div>
				</div>
			</div>
		</div>
	</div>
</DefaultLayout>