'use client'

import { IconButton } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import useShare from '@/hooks/useShare'
import { useParams } from 'next/navigation'

const UserShare = () => {
  const { userId } = useParams()

  const { shareFacebook, shareTwitter } = useShare()

  const handleShareFacebook = () => {
    shareFacebook({
      text: 'Come to Crushlevel for chat, Crush, and AI - chat.',
      shareUrl: `${process.env.NEXT_PUBLIC_APP_URL}/@${userId}`,
    })
  }
  const handleShareTwitter = () => {
    shareTwitter({
      text: 'Come to Crushlevel for chat, Crush, and AI - chat.',
      shareUrl: `${process.env.NEXT_PUBLIC_APP_URL}/@${userId}`,
    })
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <IconButton variant="tertiary" size="large">
          <i className="iconfont icon-Share-border" />
        </IconButton>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem onClick={handleShareFacebook}>
          <i className="iconfont icon-social-facebook" />
          <span>Share to Facebook</span>
        </DropdownMenuItem>
        <DropdownMenuItem onClick={handleShareTwitter}>
          <i className="iconfont icon-social-twitter" />
          <span>Share to X</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export default UserShare
