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

/**
 * ResponseChart - Displays a bar chart visualization of poll responses
 */
export const ResponseChart = ({ statsData }) => {
	return (
		<Card className="gap-4">
			<CardHeader>
				<CardTitle className="text-lg">{__("Response Distribution", "socialpoll")}</CardTitle>
			</CardHeader>
			<CardContent>
				<div className="h-[350px] w-full">
					<ReactApexChart
						options={{
							chart: {
								toolbar: { show: false },
								animations: {
									enabled: true,
									speed: 500,
								},
							},
							plotOptions: {
								bar: {
									borderRadius: 4,
									distributed: true,
								},
							},
							dataLabels: { enabled: false },
							legend: { show: false },
							xaxis: {
								categories: statsData.options.map((opt) => opt.option_text),
							},
							tooltip: {
								y: {
									formatter: (val, { dataPointIndex }) => {
										return `${val} ${__("votes", "socialpoll")} (${statsData.options[dataPointIndex].percentage} %)`;
									},
								},
							},
						}}
						series={[
							{
								name: __("Votes", "socialpoll"),
								data: statsData.options.map((opt) => opt.vote_count),
							},
						]}
						type="bar"
						height="100%"
					/>
				</div>
			</CardContent>
			<CardFooter className="flex-col items-start gap-2 text-sm">
				<div className="leading-none text-muted-foreground">
					{__("Total of", "socialpoll")} {statsData.totalVotes} {__("votes across", "socialpoll")}{" "}
					{statsData.options.length} {__("options", "socialpoll")}
				</div>
			</CardFooter>
		</Card>
	);
};

export default ResponseChart;