import { Linking, Text, View } from 'react-native';

import { Button } from '~/components/ui/button';
import { Card } from '~/components/ui/card';
import { EmptyState } from '~/components/ui/empty-state';
import { titleize } from '~/utils/format';

type PullRequest = {
  _id: string;
  htmlUrl: string;
  number: number;
  repoFullName: string;
  state: string;
  title: string;
};

export const SpoonDetailPrs = ({
  pullRequests,
}: {
  pullRequests: PullRequest[];
}) => (
  <View className='gap-3'>
    {pullRequests.length ? (
      pullRequests.map((pullRequest) => (
        <Card key={pullRequest._id}>
          <Text className='text-foreground font-medium'>
            #{pullRequest.number} {pullRequest.title}
          </Text>
          <Text className='text-muted-foreground mt-2 text-xs'>
            {titleize(pullRequest.state)} · {pullRequest.repoFullName}
          </Text>
          <Button
            variant='outline'
            onPress={() => void Linking.openURL(pullRequest.htmlUrl)}
          >
            Open PR
          </Button>
        </Card>
      ))
    ) : (
      <EmptyState
        description='Cached fork and upstream pull requests appear here.'
        title='No pull requests cached'
      />
    )}
  </View>
);
