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

export const SpoonPrList = ({
  pullRequests,
}: {
  pullRequests: Doc<'spoonPullRequests'>[];
}) => (
  <div className='space-y-3'>
    {pullRequests.length ? (
      pullRequests.map((pullRequest) => (
        <Card
          key={`${pullRequest.repoFullName}-${pullRequest.githubId}`}
          className='shadow-none'
        >
          <CardContent className='flex flex-col gap-3 p-4 md:flex-row md:items-start md:justify-between'>
            <div>
              <div className='flex flex-wrap items-center gap-2'>
                <p className='font-medium'>
                  #{pullRequest.number} {pullRequest.title}
                </p>
                <Badge variant='outline'>{pullRequest.state}</Badge>
                <Badge variant='secondary'>
                  {pullRequest.scope.replaceAll('_', ' ')}
                </Badge>
              </div>
              <p className='text-muted-foreground mt-1 text-sm'>
                {pullRequest.repoFullName}: {pullRequest.headRef} →{' '}
                {pullRequest.baseRef}
              </p>
            </div>
            <Button variant='outline' size='sm' asChild>
              <a href={pullRequest.htmlUrl} target='_blank' rel='noreferrer'>
                Open
              </a>
            </Button>
          </CardContent>
        </Card>
      ))
    ) : (
      <Card className='shadow-none'>
        <CardContent className='text-muted-foreground p-6 text-sm'>
          Pull requests will appear after the next GitHub refresh.
        </CardContent>
      </Card>
    )}
  </div>
);
