import { CheckCircle, XCircle, Clock } from 'lucide-react'
interface RepoCardProps {
name: string
gitRef: string
refType: string
extractedAt: string
extractors: string[]
onClick?: () => void
}
export default function RepoCard({
name,
gitRef,
refType,
extractedAt,
extractors,
onClick,
}: RepoCardProps) {
const extractedDate = new Date(extractedAt)
const isStale = Date.now() - extractedDate.getTime() > 7 * 24 * 60 * 60 * 1000 // 7 days
return (
<div
onClick={onClick}
className={`bg-gray-800 rounded-lg p-4 border border-gray-700 hover:border-blue-500 transition-colors ${
onClick ? 'cursor-pointer' : ''
}`}
>
<div className="flex items-start justify-between mb-2">
<h3 className="text-lg font-semibold">{name}</h3>
{isStale ? (
<Clock className="text-yellow-500" size={20} />
) : (
<CheckCircle className="text-green-500" size={20} />
)}
</div>
<div className="text-sm text-gray-400 space-y-1">
<div>
<span className="font-medium">Ref:</span> {gitRef} ({refType})
</div>
<div>
<span className="font-medium">Extracted:</span>{' '}
{extractedDate.toLocaleDateString()}
</div>
<div>
<span className="font-medium">Extractors:</span> {extractors.length}
</div>
</div>
</div>
)
}
export { RepoCard }
