import React from "react";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Skeleton } from "@/components/ui/skeleton";
import { __ } from "@wordpress/i18n";

/**
 * PollTableSkeleton - Displays a loading skeleton for the poll table
 * @param {Object} props - Component props
 * @param {number} props.rows - Number of skeleton rows to display (default: 5)
 */
export const PollTableSkeleton = ({ rows = 5 }) => {
	return (
		<Table>
			<TableHeader>
				<TableRow>
					<TableHead className="w-[60px]">{__("# ID", "socialpoll")}</TableHead>
					<TableHead className="w-[400px]">{__("Question", "socialpoll")}</TableHead>
					<TableHead>{__("Status", "socialpoll")}</TableHead>
					<TableHead>{__("Votes", "socialpoll")}</TableHead>
					<TableHead>{__("Most voted option", "socialpoll")}</TableHead>
					<TableHead className="text-right">{__("Shortcode", "socialpoll")}</TableHead>
					<TableHead className="text-right">{__("Actions", "socialpoll")}</TableHead>
				</TableRow>
			</TableHeader>
			<TableBody>
				{Array(rows)
					.fill(0)
					.map((_, index) => (
						<TableRow key={index}>
							<TableCell>
								<Skeleton className="h-5 w-8" />
							</TableCell>
							<TableCell>
								<Skeleton className="h-5 w-full max-w-[350px]" />
							</TableCell>
							<TableCell>
								<Skeleton className="h-4 w-14 rounded-full" />
							</TableCell>
							<TableCell>
								<div className="flex flex-row items-center gap-2">
									<Skeleton className="h-4 w-14" />
								</div>
							</TableCell>
							<TableCell>
								<div className="flex flex-row items-center gap-2">
									<Skeleton className="h-5 w-12" />
								</div>
							</TableCell>
							<TableCell>
								<div className="flex justify-end">
									<Skeleton className="h-8 w-32" />
								</div>
							</TableCell>
							<TableCell>
								<div className="flex flex-row justify-end gap-2">
									<Skeleton className="h-9 w-9 rounded-md" />
									<Skeleton className="h-9 w-9 rounded-md" />
									<Skeleton className="h-9 w-9 rounded-md" />
								</div>
							</TableCell>
						</TableRow>
					))}
			</TableBody>
		</Table>
	);
};

export default PollTableSkeleton;