import React from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { __ } from "@wordpress/i18n";

/**
 * ParticipationCard - Displays participation statistics for a poll
 */
export const ParticipationCard = ({ statsData }) => {
	return (
		<Card className="gap-4">
			<CardHeader className="pb-2">
				<CardTitle className="text-lg">{__("Poll Participation", "socialpoll")}</CardTitle>
				<CardDescription>
					{statsData.totalVotes} {__("votes from", "socialpoll")} {statsData.totalVisits} {__("visits", "socialpoll")} (
					{statsData.participationRate}% {__("participation rate", "socialpoll")})
				</CardDescription>
			</CardHeader>
			<CardContent>
				<div className="flex justify-between items-center mb-2">
					<div className="space-y-1">
						<div className="text-sm font-medium">{__("Participation Rate", "socialpoll")}</div>
						<div className="text-2xl font-bold">{statsData.participationRate}%</div>
					</div>
					<div className="space-y-1">
						<div className="text-sm font-medium">{__("Total Votes", "socialpoll")}</div>
						<div className="text-2xl font-bold">{statsData.totalVotes}</div>
					</div>
					<div className="space-y-1">
						<div className="text-sm font-medium">{__("Total Visits", "socialpoll")}</div>
						<div className="text-2xl font-bold">{statsData.totalVisits}</div>
					</div>
				</div>
				<div className="h-4 w-full bg-slate-100 rounded-full overflow-hidden">
					<div className="h-full bg-blue-500 rounded-full" style={{ width: `${statsData.participationRate}%` }} />
				</div>
			</CardContent>
		</Card>
	);
};

export default ParticipationCard;