'use client'

import { useRouter } from 'next/navigation'
import { SwipeableRow } from './SwipeableRow'

interface Interest {
  id: string
  topic: string
  headline: string
}

interface InterestHeadlineRowProps {
  interest: Interest
  onDelete: () => Promise<void>
  isOpen: boolean
  onOpenChange: (open: boolean) => void
}

export function InterestHeadlineRow({ interest, onDelete, isOpen, onOpenChange }: InterestHeadlineRowProps) {
  const router = useRouter()

  return (
    <SwipeableRow
      onDelete={onDelete}
      onTap={() => router.push(`/interest-details?topic=${encodeURIComponent(interest.topic)}`)}
      isOpen={isOpen}
      onOpenChange={onOpenChange}
    >
      <div className="border border-border bg-card p-4 cursor-pointer transition-colors space-y-2 hover:bg-secondary">
        <div className="text-sm font-semibold text-primary">
          {interest.topic}
        </div>
        {interest.headline && (
          <div className="text-sm text-foreground line-clamp-2">
            {interest.headline}
          </div>
        )}
      </div>
    </SwipeableRow>
  )
}