'use client';
import { FunctionComponent } from 'react';
import { Box, Stack, Typography } from '@mui/material';
import { useTranslations } from 'next-intl';
import AppIcon from '@/components/common/AppIcon';

const BULLETS: ReadonlyArray<{ icon: string; key: string }> = [
  { icon: 'verification', key: 'trust_verified_nurses' },
  { icon: 'lock', key: 'trust_escrow_payment' },
  { icon: 'support', key: 'trust_support' },
];

const GLYPH_BOX = 28;

/**
 * The 2–3 trust facts at the foot of the login card — what Balinyaar actually verifies and escrows
 * (licensed + identity-verified nurses, escrow held until a confirmed check-out, support).
 * Copy is scoped to features the platform implements today, never aspirational claims.
 * Rendered inside `AuthCard`, so it is deliberately quiet: caption type and a soft glyph chip, not
 * a second set of headings competing with the form above it.
 * @component TrustBullets
 */
const TrustBullets: FunctionComponent = () => {
  const t = useTranslations('auth');
  return (
    <Stack sx={{ gap: 1.25, width: '100%' }}>
      {BULLETS.map((bullet) => (
        <Stack key={bullet.key} direction="row" sx={{ gap: 1.25, alignItems: 'center' }}>
          <Box
            aria-hidden="true"
            sx={{
              width: GLYPH_BOX,
              height: GLYPH_BOX,
              flexShrink: 0,
              display: 'grid',
              placeItems: 'center',
              borderRadius: 'var(--bal-radius-sm)',
              bgcolor: 'var(--bal-primary-soft)',
            }}
          >
            <AppIcon icon={bullet.icon} size={16} color="var(--bal-primary)" />
          </Box>
          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
            {t(bullet.key)}
          </Typography>
        </Stack>
      ))}
    </Stack>
  );
};

export default TrustBullets;
