import React from 'react';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { Button, Card } from '@/shared/components/ui';

const Centered = styled.div`
  text-align: center;
  padding: ${({ theme }) => theme.spacing[12]} ${({ theme }) => theme.spacing[4]};
  color: ${({ theme }) => theme.colors.text.secondary};
`;

interface SettingsForbiddenProps {
  onRetry?: () => void;
}

export const SettingsForbidden: React.FC<SettingsForbiddenProps> = ({ onRetry }) => {
  const { t } = useLocale();

  return (
    <Card variant="outlined" padding="lg">
      <Centered role="alert">
        <p style={{ margin: '0 0 16px' }}>{t('settings:states.forbidden')}</p>
        {onRetry && (
          <Button variant="primary" onClick={onRetry}>
            {t('settings:states.retry')}
          </Button>
        )}
      </Centered>
    </Card>
  );
};