import { HelpCircle } from "lucide-react";
import {
	Accordion,
	AccordionContent,
	AccordionItem,
	AccordionTrigger,
} from "@/components/ui/accordion";

export default function HelpPage() {
	const faqs = [
		{
			question: "Comment puis-je publier un mème ?",
			answer:
				"Pour publier un mème, vous devez être connecté à votre compte. Cliquez sur le bouton 'Publier' dans la barre latérale, choisissez votre fichier (image ou GIF), donnez-lui un titre et une catégorie, puis validez.",
		},
		{
			question: "Quels formats de fichiers sont acceptés ?",
			answer:
				"Nous acceptons les images au format PNG, JPEG, WebP et les GIF animés. La taille maximale recommandée est de 2 Mo.",
		},
		{
			question: "Comment fonctionnent les favoris ?",
			answer:
				"En cliquant sur l'icône de cœur sur un mème, vous l'ajoutez à vos favoris. Vous pouvez retrouver tous vos mèmes favoris dans l'onglet 'Mes Favoris' de votre profil.",
		},
		{
			question: "Puis-je supprimer un mème que j'ai publié ?",
			answer:
				"Oui, vous pouvez supprimer vos propres mèmes en vous rendant sur votre profil, en sélectionnant le mème et en cliquant sur l'option de suppression.",
		},
		{
			question: "Comment fonctionne le système de recherche ?",
			answer:
				"Vous pouvez rechercher des mèmes par titre en utilisant la barre de recherche dans la colonne de droite. Vous pouvez également filtrer par catégories ou par tags populaires.",
		},
	];

	return (
		<div className="max-w-3xl mx-auto py-12 px-4">
			<div className="flex items-center gap-3 mb-8">
				<div className="bg-primary/10 p-3 rounded-xl">
					<HelpCircle className="h-6 w-6 text-primary" />
				</div>
				<h1 className="text-3xl font-bold">Centre d'aide</h1>
			</div>

			<div className="bg-white dark:bg-zinc-900 border rounded-2xl p-6 shadow-sm mb-12">
				<h2 className="text-xl font-semibold mb-6">Foire Aux Questions</h2>
				<Accordion type="single" collapsible className="w-full">
					{faqs.map((faq, index) => (
						<AccordionItem key={faq.question} value={`item-${index}`}>
							<AccordionTrigger className="text-left">{faq.question}</AccordionTrigger>
							<AccordionContent className="text-muted-foreground leading-relaxed">
								{faq.answer}
							</AccordionContent>
						</AccordionItem>
					))}
				</Accordion>
			</div>

			<div className="text-center space-y-4">
				<h2 className="text-lg font-medium">Vous ne trouvez pas de réponse ?</h2>
				<p className="text-muted-foreground">
					N'hésitez pas à nous contacter sur nos réseaux sociaux ou par email.
				</p>
				<p className="font-semibold text-primary">contact@memegoat.fr</p>
			</div>
		</div>
	);
}