'use client';
import Link from 'next/link';
import { ArrowUpRight, Briefcase, Users } from 'lucide-react';
import { getCategoryTl } from '@/lib/categoryTl';
import { JOBS_FEATURE_ENABLED } from '@/lib/features';
import { useLanguage } from '@/contexts/LanguageContext';
import { cn } from '@/lib/utils';
export interface CategoryCardData {
id: string;
name: string;
slug: string;
icon?: string;
description?: string;
_count?: { workerSkills: number; jobs: number };
}
interface CategoryCardProps {
category: CategoryCardData;
/** Compact tiles for home browse grid; default for full categories page */
variant?: 'compact' | 'default';
}
function CategoryStats({
workers,
jobs,
compact,
}: {
workers: number;
jobs: number;
compact?: boolean;
}) {
const showJobs = JOBS_FEATURE_ENABLED && jobs > 0;
if (workers === 0 && !showJobs) return null;
return (
{workers > 0 && (
{workers} worker{workers !== 1 ? 's' : ''}
)}
{showJobs && (
{jobs} job{jobs !== 1 ? 's' : ''}
)}
);
}
export function CategoryCard({ category, variant = 'default' }: CategoryCardProps) {
const { lang, t } = useLanguage();
const workers = category._count?.workerSkills ?? 0;
const jobs = category._count?.jobs ?? 0;
const compact = variant === 'compact';
const tl = getCategoryTl(category.slug);
const name = lang === 'tl' && tl?.nameTl ? tl.nameTl : category.name;
const description =
lang === 'tl' && tl?.descriptionTl ? tl.descriptionTl : category.description;
return (
{category.icon || '🔧'}
{name}
{!compact && description && (
{description}
)}
{!compact && workers === 0 && jobs === 0 && (
{t('Browse this trade', 'Tingnan ang trabahong ito')}
)}
);
}
export function CategoryCardSkeleton({ compact }: { compact?: boolean }) {
return (
);
}