Message Button

1'use client';
2 
3import React from 'react';
4import { Button } from '@/components/ui/button';
5import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
6import { cn } from '@/lib/utils/deso';
7import { Mail } from 'lucide-react';
8 
9export interface MessageButtonProps {
10  className?: string;
11  onClick?: () => void;
12  variant?: 'default' | 'icon' | 'icon-only';
13  showTooltip?: boolean;
14  tooltipText?: string;
15}
16 
17export function MessageButton({
18  className,
19  onClick,
20  variant = 'default',
21  showTooltip = false,
22  tooltipText = 'Send Message',
23}: MessageButtonProps) {
24  const showIcon = variant === 'icon' || variant === 'icon-only';
25  const showText = variant === 'default' || variant === 'icon';
26 
27  const buttonContent = (
28    <Button
29      variant="outline"
30      className={cn('transition-all duration-200 flex items-center gap-2', className)}
31      onClick={onClick}
32    >
33      {showIcon && <Mail className="h-4 w-4" />}
34      {showText && <span>Message</span>}
35    </Button>
36  );
37 
38  if (showTooltip) {
39    return (
40      <TooltipProvider>
41        <Tooltip>
42          <TooltipTrigger asChild>{buttonContent}</TooltipTrigger>
43          <TooltipContent>
44            <p>{tooltipText}</p>
45          </TooltipContent>
46        </Tooltip>
47      </TooltipProvider>
48    );
49  }
50 
51  return buttonContent;
52}