import React from "react";
import { motion } from "framer-motion";
import {
	UserCircleIcon,
	CalendarIcon,
	ClockIcon,
	LockClosedIcon,
	LockOpenIcon,
	StarIcon,
} from "@heroicons/react/24/outline";
import dayjs from "dayjs";

interface InfoBadgeProps {
	icon: React.ReactNode;
	text: string;
	delay?: number;
}

export function InfoBadge({ icon, text, delay = 0 }: InfoBadgeProps) {
	return (
		<motion.div
			initial={{ opacity: 0, x: -20 }}
			animate={{ opacity: 1, x: 0 }}
			whileHover={{ scale: 1.05 }}
			className="flex items-center gap-2 bg-white px-3 py-1.5 rounded-md border border-secondary-350/50 shadow-md hover:bg-secondary-50 transition-colors duration-300">
			{icon}
			<span className="text-primary">{text}</span>
		</motion.div>
	);
}

export function AuthorBadge({ name }: { name: string }) {
	return (
		<InfoBadge
			icon={<UserCircleIcon className="h-5 w-5 text-primary" />}
			text={name}
		/>
	);
}

export function DateBadge({ date, label }: { date: string; label: string }) {
	return (
		<InfoBadge
			icon={<CalendarIcon className="h-5 w-5 text-primary" />}
			text={`${label}: ${dayjs(date).format("YYYY-MM-DD")}`}
		/>
	);
}

export function UpdatedBadge({ date }: { date: string }) {
	return (
		<InfoBadge
			icon={<ClockIcon className="h-5 w-5 text-primary" />}
			text={`更新于: ${dayjs(date).format("YYYY-MM-DD")}`}
			delay={0.45}
		/>
	);
}

export function VisibilityBadge({ isPublic }: { isPublic: boolean }) {
	return (
		<InfoBadge
			icon={
				isPublic ? (
					<LockOpenIcon className="h-5 w-5 text-primary" />
				) : (
					<LockClosedIcon className="h-5 w-5 text-primary" />
				)
			}
			text={isPublic ? "公开" : "私信"}
			delay={0.5}
		/>
	);
}

export function TermBadge({ term }: { term: string }) {
	return (
		<InfoBadge
			icon={<StarIcon className="h-5 w-5 text-primary" />}
			text={term}
			delay={0.55}
		/>
	);
}
