1import { HeartHandshake } from "lucide-react";
 2import { Button, PopoverTrigger, Popover, PopoverContent } from "@marzneshin/common/components";
 3import { type FC, type HTMLAttributes } from "react";
 4import { cn } from "@marzneshin/common/utils";
 5import { useTranslation } from "react-i18next";
 6import { DonationButton } from "./donation-button";
 7
 8export interface SupportUsPopoverProps extends HTMLAttributes<HTMLDivElement> {
 9    donationLink: string;
10}
11
12export const SupportUsPopover: FC<SupportUsPopoverProps> = ({ className, donationLink }) => {
13    const { t } = useTranslation();
14    return (
15        <Popover>
16            <PopoverTrigger asChild>
17                <Button size="icon" variant="secondary">
18                    <HeartHandshake />
19                </Button>
20            </PopoverTrigger>
21            <PopoverContent sideOffset={10} className={cn("p-4 flex flex-col w-80 gap-2 text-muted-foreground text-sm", className)}>
22                <div className="flex-row flex items-center justify-between w-full text-primary">
23                    <div className="text-medium flex-row flex gap-1">
24                        <HeartHandshake /> {t('support-us.title')}
25                    </div>
26                </div>
27                <p>{t('support-us.desc')}</p>
28                <DonationButton donationLink={donationLink} />
29            </PopoverContent>
30        </Popover>
31    );
32}
33