import { Box, Tooltip, Typography } from '@mui/material'

interface Props {
  promptVersion: string
  schemaVersion?: string
}

export function PromptVersionBadge({ promptVersion, schemaVersion }: Props) {
  const badge = (
    <Box
      sx={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 0.5,
        px: 0.75,
        py: 0.2,
        bgcolor: '#f1f5f9',
        borderRadius: 1,
        border: '1px solid #e2e8f0',
        cursor: schemaVersion ? 'default' : undefined,
      }}
    >
      <Typography
        variant="caption"
        sx={{ fontFamily: 'monospace', fontSize: '0.65rem', color: '#475569', fontWeight: 600, lineHeight: 1.4 }}
      >
        {promptVersion}
      </Typography>
      {schemaVersion && (
        <>
          <Box sx={{ width: '1px', height: 10, bgcolor: '#cbd5e1', flexShrink: 0 }} />
          <Typography
            variant="caption"
            sx={{ fontFamily: 'monospace', fontSize: '0.6rem', color: '#94a3b8', lineHeight: 1.4 }}
          >
            {schemaVersion}
          </Typography>
        </>
      )}
    </Box>
  )

  return schemaVersion ? (
    <Tooltip title={`Prompt: ${promptVersion} · Schema: ${schemaVersion}`}>{badge}</Tooltip>
  ) : badge
}
