'use client'

import { useTranslations } from 'next-intl'

interface ShareButtonsProps {
  displayName: string
}

export function ShareButtons({ displayName }: ShareButtonsProps) {
  const t = useTranslations('project')

  const handleShare = () => {
    const url = encodeURIComponent(window.location.href)
    const text = encodeURIComponent(t('shareTweetText', { name: displayName }))
    window.open(`https://twitter.com/intent/tweet?url=${url}&text=${text}`, '_blank')
  }

  const handleCopyLink = () => {
    navigator.clipboard.writeText(window.location.href)
  }

  return (
    <div className="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 flex flex-col sm:flex-row justify-between items-center gap-6">
      <div className="flex gap-4">
        <button
          className="p-2 border border-black dark:border-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          title={t('shareOnX')}
          onClick={handleShare}
          id="share-button"
          name="share"
        >
          <span className="material-icons text-lg">share</span>
        </button>
        <button
          className="p-2 border border-black dark:border-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
          title={t('copyLink')}
          onClick={handleCopyLink}
          id="copy-link-button"
          name="copyLink"
        >
          <span className="material-icons text-lg">link</span>
        </button>
      </div>
      <div className="flex items-center gap-2">
        <span className="text-sm font-display font-bold text-gray-500">{t('feedbackQuestion')}</span>
        <button
          className="px-4 py-2 bg-primary text-black font-display font-bold text-xs uppercase border border-black hover:bg-yellow-400 transition-colors shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:shadow-none active:translate-x-[2px] active:translate-y-[2px]"
          id="feedback-button"
          name="feedback"
        >
          {t('feedbackYes')}
        </button>
      </div>
    </div>
  )
}