import { Box, Text } from 'ink'
import React from 'react'
import type { FilteredRepository } from '../types/index.js'

interface RepoListProps {
  repositories: FilteredRepository[]
  title: string
}

export const RepoList: React.FC<RepoListProps> = ({ repositories, title }) => {
  if (repositories.length === 0) {
    return (
      <Box flexDirection="column" marginTop={1}>
        <Text color="green">✓ No inactive repositories found!</Text>
      </Box>
    )
  }

  return (
    <Box flexDirection="column" marginTop={1}>
      <Text bold color="yellow">
        {title} ({repositories.length} repositories)
      </Text>
      <Box marginTop={1} flexDirection="column">
        {repositories.map((repo) => (
          <Box key={repo.id} marginBottom={1} flexDirection="column">
            <Text color="cyan">• {repo.full_name}</Text>
            <Box marginLeft={2} flexDirection="column">
              <Text dimColor>
                Stars: {repo.stargazers_count} | Forks: {repo.forks_count}
              </Text>
              <Text dimColor>
                Last activity:{' '}
                {repo.lastCommitDate
                  ? `${repo.daysSinceLastCommit} days ago`
                  : 'No commits found'}
              </Text>
              {repo.description && (
                <Text dimColor wrap="wrap">
                  {repo.description}
                </Text>
              )}
            </Box>
          </Box>
        ))}
      </Box>
    </Box>
  )
}