import React from 'react';
import styled from 'styled-components';
import { useLocale } from '@/app/providers/LocaleProvider';
import { useBrandingLogos } from '@/shared/hooks/useBrandingLogos';

export interface AppLogoProps {
  onClick?: () => void;
  className?: string;
}

const LogoButton = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
  width: 100%;
`;

const LogoImage = styled.img`
  height: 60px;
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
`;

export const AppLogo: React.FC<AppLogoProps> = ({ onClick, className }) => {
  const { t } = useLocale();
  const { landscape } = useBrandingLogos();
  const appName = t('common:app.name');

  const content = <LogoImage src={landscape} alt={t('common:app.logoAlt')} />;

  if (onClick) {
    return (
      <LogoButton type="button" onClick={onClick} className={className} aria-label={appName}>
        {content}
      </LogoButton>
    );
  }

  return <div className={className}>{content}</div>;
};