'use client';

import type { Doc } from '@spoon/backend/convex/_generated/dataModel.js';
import { Badge } from '@spoon/ui';

export const JobStatusBar = ({ job }: { job: Doc<'agentJobs'> }) => (
  <div className='border-border bg-background flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3'>
    <div className='min-w-0'>
      <h1 className='truncate text-base font-semibold'>{job.forkRepo}</h1>
      <p className='text-muted-foreground truncate font-mono text-xs'>
        {job.baseBranch} {'->'} {job.workBranch}
      </p>
    </div>
    <div className='flex items-center gap-2'>
      <Badge variant='outline' className='capitalize'>
        {job.status.replaceAll('_', ' ')}
      </Badge>
      <Badge variant='secondary' className='capitalize'>
        {(job.workspaceStatus ?? 'not_started').replaceAll('_', ' ')}
      </Badge>
      <Badge variant='outline'>{job.runtime ?? 'opencode'}</Badge>
    </div>
  </div>
);
