package pages

import (
	"reichard.io/antholume/database"
	"reichard.io/antholume/graph"
	"reichard.io/antholume/ngtemplates/common"
	"reichard.io/antholume/ngtemplates/components"
)

templ Home(
	settings common.Settings,
	dailyReadSVG graph.SVGGraphData,
	userStreaks []database.UserStreak,
	userStatistics common.UserStatistics,
	userMetadata common.UserMetadata,
) {
	@layout(settings, "Home") {
		<div class="flex flex-col gap-4">
			<div class="w-full">
				@components.DailyReadChart(dailyReadSVG)
			</div>
			<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
				@components.InfoCardLink("Documents", userMetadata.DocumentCount, "./documents")
				@components.InfoCardLink("Activity Records", userMetadata.ActivityCount, "./activity")
				@components.InfoCardLink("Progress Records", userMetadata.ProgressCount, "./progress")
				@components.InfoCard("Devices", userMetadata.DeviceCount)
			</div>
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
				for _, item := range userStreaks {
					@components.StreakCard(item)
				}
			</div>
			<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
				@components.LeaderboardCard("WPM", userStatistics.WPM)
				@components.LeaderboardCard("Duration", userStatistics.Duration)
				@components.LeaderboardCard("Words", userStatistics.Words)
			</div>
		</div>
	}
}