'use client';
import { FunctionComponent } from 'react';
import { 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' },
];

/**
 * The 2–3 trust facts under 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.
 * @component TrustBullets
 */
const TrustBullets: FunctionComponent = () => {
  const t = useTranslations('auth');
  return (
    <Stack sx={{ gap: 1.5, width: '100%' }}>
      {BULLETS.map((bullet) => (
        <Stack key={bullet.key} direction="row" sx={{ gap: 1.5, alignItems: 'flex-start' }}>
          <AppIcon
            icon={bullet.icon}
            size={20}
            color="var(--bal-primary)"
            style={{ flexShrink: 0, marginTop: 2 }}
            aria-hidden="true"
          />
          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
            {t(bullet.key)}
          </Typography>
        </Stack>
      ))}
    </Stack>
  );
};

export default TrustBullets;
