import { Link } from "react-router-dom"
import { MessageCircle, ExternalLink } from "lucide-react"
import type { Comment } from "../../models"
import { timeAgo } from "../../utils/timeAgo"

type CommentCardProps = {
  comment: Comment
}

export default function CommentCard({ comment }: CommentCardProps) {
  const dealTitle = comment.deal?.title ?? "-"
  const dealId = comment.deal?.id
  const created = comment.createdAt

  return (
    <div className="rounded-2xl bg-surface border border-border p-4 hover:border-border/70 transition">
      {/* Header */}
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          {dealId ? (
            <Link
              to={`/deal/${dealId}`}
              className="text-base font-semibold text-text hover:text-primary transition-colors line-clamp-1"
            >
              {dealTitle}
            </Link>
          ) : (
            <div className="text-base font-semibold text-text line-clamp-1">
              {dealTitle}
            </div>
          )}

          <div className="mt-1 flex items-center gap-2 text-xs text-text-muted">
            <span className="inline-flex items-center gap-1">
              <MessageCircle className="w-3.5 h-3.5" />
              Yorum
            </span>
            <span className="opacity-60">•</span>
            <span>{timeAgo(created)}</span>
          </div>
        </div>

        {dealId ? (
          <Link
            to={`/deal/${dealId}`}
            className="shrink-0 inline-flex items-center justify-center rounded-xl p-2 bg-background border border-border text-text-muted hover:text-primary hover:border-border/70 transition"
            aria-label="Fırsata git"
          >
            <ExternalLink className="w-4 h-4" />
          </Link>
        ) : null}
      </div>

      {/* Body */}
      <div className="mt-3 rounded-xl bg-background border border-border/60 p-3">
        <p className="text-sm text-text leading-relaxed whitespace-pre-line">
          {comment.text}
        </p>
      </div>
    </div>
  )
}
