import Image from 'next/image'
import Link from 'next/link'
import type { Series } from '@/types/nostr'
import { t } from '@/lib/i18n'

interface SeriesCardProps {
  series: Series
  onSelect: (seriesId: string | undefined) => void
  selected?: boolean
}

export function SeriesCard({ series, onSelect, selected }: SeriesCardProps) {
  return (
    <div
      className={`border rounded-lg p-4 bg-white shadow-sm ${
        selected ? 'border-blue-500 ring-1 ring-blue-200' : 'border-gray-200'
      }`}
    >
      {series.coverUrl && (
        <div className="relative w-full h-40 mb-3">
          <Image
            src={series.coverUrl}
            alt={series.title}
            className="object-cover rounded"
            fill
            sizes="(max-width: 768px) 100vw, 50vw"
          />
        </div>
      )}
      <h3 className="text-lg font-semibold">{series.title}</h3>
      <p className="text-sm text-gray-700 line-clamp-3">{series.description}</p>
      <div className="mt-3 flex items-center justify-between text-sm text-gray-600">
        <span>{series.category === 'science-fiction' ? t('category.science-fiction') : t('category.scientific-research')}</span>
        <button
          type="button"
          className="px-3 py-1 text-sm rounded bg-blue-600 text-white hover:bg-blue-700"
          onClick={() => onSelect(series.id)}
        >
          {t('common.open')}
        </button>
      </div>
      <div className="mt-2 text-xs text-blue-600">
        <Link href={`/series/${series.id}`} className="underline">
          {t('series.view')}
        </Link>
      </div>
    </div>
  )
}