'use client'

import * as React from 'react'
import { cn } from '../../lib/utils'

export interface ListCardProps {
  name: string
  sourceType: string
  memberCount: number
  createdAt: string
  onClick?: () => void
  className?: string
}

const sourceTypeBadgeClasses: Record<string, string> = {
  static: 'bg-blue-100 text-blue-700 border-blue-200',
  funnel: 'bg-purple-100 text-purple-700 border-purple-200',
  query: 'bg-green-100 text-green-700 border-green-200',
}

export function ListCard({
  name,
  sourceType,
  memberCount,
  createdAt,
  onClick,
  className,
}: ListCardProps) {
  const badgeClass =
    sourceTypeBadgeClasses[sourceType] ??
    'bg-gray-100 text-gray-700 border-gray-200'

  return (
    <div
      role={onClick ? 'button' : undefined}
      tabIndex={onClick ? 0 : undefined}
      onClick={onClick}
      onKeyDown={
        onClick
          ? (e) => {
              if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault()
                onClick()
              }
            }
          : undefined
      }
      className={cn(
        'rounded-lg border bg-card text-card-foreground p-4 transition-all duration-150',
        onClick && 'cursor-pointer hover:shadow-md hover:border-primary/30',
        className,
      )}
    >
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <h4 className="text-sm font-semibold text-foreground truncate">
            {name}
          </h4>
          <p className="text-xs text-muted-foreground mt-1">
            {memberCount.toLocaleString()} {memberCount === 1 ? 'member' : 'members'}
          </p>
        </div>
        <span
          className={cn(
            'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium shrink-0',
            badgeClass,
          )}
        >
          {sourceType}
        </span>
      </div>
      <p className="text-xs text-muted-foreground mt-2">
        Created {createdAt}
      </p>
    </div>
  )
}