import React from "react";
import { Badge } from "@/components/ui/badge";
import { __ } from '@wordpress/i18n';

/**
 * StatusBadge - Displays poll status with appropriate styling
 * @param {Object} props - Component props
 * @param {string} props.status - The visibility status to display (visible/hidden)
 * @param {string} props.type - The type of status badge (visibility/publish)
 * @param {boolean} props.isPublished - Whether the poll is published (for publish type)
 */
export const StatusBadge = ({ status, type = "visibility", isPublished }) => {
	if (type === "publish") {
		return (
			<Badge className={getPublishBadgeClass(isPublished)}>
				{isPublished ? __('Published', 'socialpoll') : __('Draft', 'socialpoll')}
			</Badge>
		);
	}

	const statusText = status === "visible" ? __('Visible', 'socialpoll') : status === "hidden" ? __('Hidden', 'socialpoll') : status;

	return (
		<Badge className={getVisibilityBadgeClass(status)}>
			{statusText}
		</Badge>
	);
};

/**
 * Get CSS class for visibility badge
 * @param {string} status - visibility status
 * @returns {string} CSS class
 */
function getVisibilityBadgeClass(status) {
	switch (status) {
		case "visible":
			return "bg-green-100 text-green-800 hover:bg-green-100 !border-green-300";
		case "hidden":
			return "bg-slate-100 text-slate-600 hover:bg-slate-100 !border-slate-200";
		default:
			return "bg-slate-100 text-slate-600 hover:bg-amber-100 !border-slate-200";
	}
}

/**
 * Get CSS class for publish badge
 * @param {boolean} isPublished - whether the poll is published
 * @returns {string} CSS class
 */
function getPublishBadgeClass(isPublished) {
	if (isPublished) {
		return "bg-blue-100 text-blue-800 hover:bg-blue-100 !border-blue-300";
	} else {
		return "bg-gray-100 text-gray-600 hover:bg-gray-100 !border-gray-300";
	}
}

export default StatusBadge;