1import type { FC, HTMLAttributes } from "react";
 2import { SupportUsVariation } from "./types";
 3import { X, HeartHandshake } from "lucide-react";
 4import { Button, Card, CardTitle, CardContent } from "@marzneshin/common/components";
 5import { cn } from "@marzneshin/common/utils";
 6import { useTranslation } from "react-i18next";
 7
 8export interface SupportUsCardProps extends HTMLAttributes<HTMLDivElement> {
 9    variant?: SupportUsVariation;
10    donationLink: string;
11    setSupportUsOpen: (state: boolean) => void;
12}
13
14export const SupportUsCard: FC<SupportUsCardProps> = ({ className, variant, setSupportUsOpen, donationLink }) => {
15    const { t } = useTranslation();
16    return (
17        <Card>
18            <CardContent className={cn("p-4 flex flex-col w-fit gap-2 text-muted-foreground text-sm", className)}>
19                <CardTitle className="flex-row flex items-center justify-between w-full text-primary">
20                    <div className="text-medium flex-row flex gap-1">
21                        <HeartHandshake /> {t('support-us.title')}
22                    </div>
23                    {variant !== "view" && (
24                        <Button
25                            variant="ghost"
26                            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"
27                            onMouseDown={() => setSupportUsOpen(false)}
28                        >
29                            <X className="size-4" />
30                            <span className="sr-only">Close</span>
31                        </Button>
32                    )}
33                </CardTitle>
34                <p>{t('support-us.desc')}</p>
35                <Button size="sm" variant="secondary" className="w-fit" asChild>
36                    <a
37                        href={donationLink}
38                        target="_blank"
39                        rel="noopener noreferrer"
40                    >
41                        {t('support-us.donate')}
42                    </a>
43                </Button>
44            </CardContent>
45        </Card>
46    );
47}