openmonetis/components/lancamentos/select-items.tsx

"use client";

import { RiBankCard2Line, RiBankLine } from "@remixicon/react";
import Image from "next/image";
import { CategoryIcon } from "@/components/categorias/category-icon";
import DotIcon from "@/components/dot-icon";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { getAvatarSrc } from "@/lib/pagadores/utils";
import { getConditionIcon, getPaymentMethodIcon } from "@/lib/utils/icons";

type SelectItemContentProps = {
	label: string;
	avatarUrl?: string | null;
	logo?: string | null;
	icon?: string | null;
};

export function PagadorSelectContent({
	label,
	avatarUrl,
}: SelectItemContentProps) {
	const avatarSrc = getAvatarSrc(avatarUrl);
	const initial = label.charAt(0).toUpperCase() || "?";

	return (
		<span className="flex items-center gap-2">
			<Avatar className="size-5 border border-border/60 bg-background">
				<AvatarImage src={avatarSrc} alt={`Avatar de ${label}`} />
				<AvatarFallback className="text-[10px] font-medium uppercase">
					{initial}
				</AvatarFallback>
			</Avatar>
			<span>{label}</span>
		</span>
	);
}

export function CategoriaSelectContent({
	label,
	icon,
}: SelectItemContentProps) {
	return (
		<span className="flex items-center gap-2">
			<CategoryIcon name={icon} className="size-4" />
			<span>{label}</span>
		</span>
	);
}

export function TransactionTypeSelectContent({ label }: { label: string }) {
	const colorMap: Record<string, string> = {
		Receita: "bg-emerald-600 dark:bg-emerald-400",
		Despesa: "bg-red-600 dark:bg-red-400",
		Transferência: "bg-blue-600 dark:bg-blue-400",
	};

	return (
		<span className="flex items-center gap-2">
			<DotIcon color={colorMap[label]} />
			<span>{label}</span>
		</span>
	);
}

export function PaymentMethodSelectContent({ label }: { label: string }) {
	const icon = getPaymentMethodIcon(label);

	return (
		<span className="flex items-center gap-2">
			{icon}
			<span>{label}</span>
		</span>
	);
}

export function ConditionSelectContent({ label }: { label: string }) {
	const icon = getConditionIcon(label);

	return (
		<span className="flex items-center gap-2">
			{icon}
			<span>{label}</span>
		</span>
	);
}

export function ContaCartaoSelectContent({
	label,
	logo,
	isCartao,
}: SelectItemContentProps & { isCartao?: boolean }) {
	const resolveLogoSrc = (logoPath: string | null) => {
		if (!logoPath) {
			return null;
		}

		const fileName = logoPath.split("/").filter(Boolean).pop() ?? logoPath;
		return `/logos/${fileName}`;
	};

	const logoSrc = resolveLogoSrc(logo);
	const Icon = isCartao ? RiBankCard2Line : RiBankLine;

	return (
		<span className="flex items-center gap-2">
			{logoSrc ? (
				<Image
					src={logoSrc}
					alt={`Logo de ${label}`}
					width={20}
					height={20}
					className="rounded"
				/>
			) : (
				<Icon className="size-4 text-muted-foreground" aria-hidden />
			)}
			<span>{label}</span>
		</span>
	);
}