import React from 'react';
import styled from 'styled-components';
import { useTranslation } from 'react-i18next';
import { useOnlineStatus } from '@/shared/hooks/useOnlineStatus';

const Banner = styled.div`
  position: sticky;
  top: 0;
  z-index: ${({ theme }) => theme.zIndex.sticky + 1};
  background: ${({ theme }) => theme.colors.warning};
  color: #1f2937;
  text-align: center;
  padding: ${({ theme }) => `${theme.spacing[2]} ${theme.spacing[4]}`};
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  font-weight: ${({ theme }) => theme.typography.fontWeight.medium};
`;

export const OfflineBanner: React.FC = () => {
  const { t } = useTranslation('common');
  const online = useOnlineStatus();

  if (online) {
    return null;
  }

  return <Banner role="status">{t('status.offline')}</Banner>;
};