OpenFlare/frontend/app/(main)/pages/components/project-list-item.tsx

'use client';

import Link from 'next/link';
import { ChevronRight } from 'lucide-react';
import { useTranslations } from 'next-intl';

import { Badge } from '@/components/ui/badge';
import type { PagesProject } from '@/lib/services/openflare';
import { formatDateTime } from '@/lib/utils';

interface ProjectListItemProps {
  project: PagesProject;
}

export function ProjectListItem({ project }: ProjectListItemProps) {
  const t = useTranslations('pages');
  return (
    <Link
      href={`/pages/detail?id=${project.id}`}
      className='group block rounded-lg border border-dashed bg-background p-4 transition hover:bg-muted/20'
    >
      <div className='flex flex-col gap-4 md:flex-row md:items-center md:justify-between'>
        <div className='min-w-0 space-y-2'>
          <div className='flex flex-wrap items-center gap-2'>
            <h2 className='text-base font-semibold'>{project.name}</h2>
            <Badge variant='outline' className='text-[10px]'>
              {project.enabled ? t('enabled') : t('disabled')}
            </Badge>
            <Badge variant='outline' className='text-[10px]'>
              {project.spa_fallback_enabled ? t('spaFallback') : t('strict404')}
            </Badge>
          </div>
          <p className='text-sm text-muted-foreground'>{project.slug}</p>
          {project.description ? (
            <p className='line-clamp-2 text-sm text-muted-foreground'>
              {project.description}
            </p>
          ) : null}
        </div>

        <div className='rounded-lg border border-dashed px-4 py-3 text-sm md:min-w-36'>
          <p className='text-xs text-muted-foreground'>{t('currentActive')}</p>
          <p className='mt-1 font-semibold'>
            {project.active_deployment
              ? `#${project.active_deployment.deployment_number}`
              : t('none')}
          </p>
        </div>
      </div>

      <div className='mt-4 flex items-center justify-between border-t border-dashed pt-3 text-xs text-muted-foreground'>
        <span>
          {t('activatedAt')}
          {project.active_deployment?.activated_at
            ? formatDateTime(project.active_deployment.activated_at)
            : t('notActivated')}
        </span>
        <span className='inline-flex items-center text-primary group-hover:translate-x-0.5 transition-transform'>
          {t('viewDetail')}
          <ChevronRight className='size-3.5 ml-0.5' />
        </span>
      </div>
    </Link>
  );
}