1import { X, HeartHandshake } from "lucide-react";
 2import { Button, Card, CardTitle, CardContent, PopoverTrigger, Popover, PopoverContent } from "@marzneshin/components";
 3import { type FC, type HTMLAttributes } from "react";
 4import { cn } from "@marzneshin/utils";
 5import { useTranslation } from "react-i18next";
 6import { SupportUsVariation, SupportUsStructure } from "./types";
 7import { useSupportUs } from "./use-support-us";
 8
 9export interface SupportUsProps extends HTMLAttributes<HTMLDivElement> {
10    open?: boolean;
11    variant?: SupportUsVariation;
12    structure?: SupportUsStructure;
13}
14
15export const SupportUs: FC<SupportUsProps> = ({ open = true, variant = "status", className, structure = "card" }) => {
16    const [supportUsOpen, setSupportUsOpen] = useSupportUs(variant, open);
17    const { t } = useTranslation();
18
19    const CardStructure = () => (
20        <Card>
21            <CardContent className={cn("p-4 flex flex-col w-fit gap-2 text-muted-foreground text-sm", className)}>
22                <CardTitle 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                    {variant !== "view" && (
27                        <Button
28                            variant="ghost"
29                            className="size-6 p-0 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none text-muted-foreground"
30                            onMouseDown={() => setSupportUsOpen(false)}
31                        >
32                            <X className="size-4" />
33                            <span className="sr-only">Close</span>
34                        </Button>
35                    )}
36                </CardTitle>
37                <p>{t('support-us.desc')}</p>
38                <Button size="sm" variant="secondary" className="w-fit" asChild>
39                    <a
40                        href="https://github.com/khodedawsh/marzneshin#donation"
41                        target="_blank"
42                        rel="noopener noreferrer"
43                    >
44                        {t('support-us.donate')}
45                    </a>
46                </Button>
47            </CardContent>
48        </Card>
49    );
50
51    const PopoverStructure = () => (
52        <Popover>
53            <PopoverTrigger asChild>
54                <Button size="icon" variant="secondary">
55                    <HeartHandshake />
56                </Button>
57            </PopoverTrigger>
58            <PopoverContent sideOffset={10} className={cn("p-4 flex flex-col w-80 gap-2 text-muted-foreground text-sm", className)}>
59                <div className="flex-row flex items-center justify-between w-full text-primary">
60                    <div className="text-medium flex-row flex gap-1">
61                        <HeartHandshake /> {t('support-us.title')}
62                    </div>
63                </div>
64                <p>{t('support-us.desc')}</p>
65                <Button size="sm" variant="secondary" className="w-fit" asChild>
66                    <a
67                        href="https://github.com/khodedawsh/marzneshin#donation"
68                        target="_blank"
69                        rel="noopener noreferrer"
70                    >
71                        {t('support-us.donate')}
72                    </a>
73                </Button>
74            </PopoverContent>
75        </Popover>
76    );
77
78    if (!supportUsOpen) return null;
79    return structure === "popover" ? <PopoverStructure /> : <CardStructure />;
80};