import { memo } from 'react'
import { Box, Typography } from '@mui/material'
import { Info } from 'lucide-react'
import { AI_DISCLAIMER } from '../../lib/constants'
import { DS_SLATE, DS_TEXT } from '../../lib/ds'

/**
 * Der einheitliche KI-Hinweis am Fuss jeder Agenten-Detailansicht (Runde 9, §5).
 *
 * Eine einzige Komponente für alle sechs Detailansichten. Der Wortlaut ist
 * vorgegeben und steht deshalb als Konstante in `constants.ts` — stünde er
 * sechsmal im Code, hiesse er nach der ersten Korrektur an fünf Stellen anders,
 * und ein Haftungshinweis, der je nach Bildschirm variiert, ist keiner.
 *
 * Bewusst dezent: grau, klein, mit dünner Trennlinie darüber. Er soll gelesen
 * werden können, ohne die Aussage darüber zu übertönen — ein roter Warnkasten
 * an jeder Detailansicht stumpft nach dem dritten Mal ab und wird dann gar
 * nicht mehr gelesen.
 */
export const AiDisclaimer = memo(function AiDisclaimer() {
  return (
    <Box
      sx={{
        display: 'flex',
        alignItems: 'flex-start',
        gap: 0.75,
        mt: 2,
        pt: 1.5,
        borderTop: `1px solid ${DS_SLATE[100]}`,
      }}
    >
      <Info size={13} color={DS_SLATE[400]} style={{ flexShrink: 0, marginTop: 2 }} />
      <Typography variant="caption" sx={{ color: DS_TEXT.muted, lineHeight: 1.5 }}>
        {AI_DISCLAIMER}
      </Typography>
    </Box>
  )
})