import React from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { __ } from "@wordpress/i18n";

/**
 * DataTable - Displays raw poll data in a tabular format
 */
export const DataTable = ({ statsData }) => {
	return (
		<Card className="gap-2">
			<CardHeader className="pb-2">
				<CardTitle className="text-lg">{__("Data Table", "socialpoll")}</CardTitle>
				<CardDescription>{__("Raw poll data", "socialpoll")}</CardDescription>
			</CardHeader>
			<CardContent>
				<Table>
					<TableHeader>
						<TableRow>
							<TableHead>{__("Option", "socialpoll")}</TableHead>
							<TableHead className="text-right">{__("Votes count", "socialpoll")}</TableHead>
							<TableHead className="text-right">{__("Percentage", "socialpoll")}</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{statsData.options.map((option) => (
							<TableRow key={option.id}>
								<TableCell>{option.option_text}</TableCell>
								<TableCell className="text-right">{option.vote_count}</TableCell>
								<TableCell className="text-right">{option.percentage}%</TableCell>
							</TableRow>
						))}
						<TableRow className="font-medium bg-slate-50">
							<TableCell>{__("Total", "socialpoll")}</TableCell>
							<TableCell className="text-right">{statsData.totalVotes}</TableCell>
							<TableCell className="text-right">100%</TableCell>
						</TableRow>
					</TableBody>
				</Table>
			</CardContent>
		</Card>
	);
};

export default DataTable;