import { Component, ChangeDetectionStrategy, inject } from '@angular/core';
import { Location } from '@angular/common';
import { TranslateService } from '../../i18n/translate.service';

@Component({
  selector: 'app-back-button',
  template: `
    <button class="dexar-back-btn" (click)="goBack()" [attr.aria-label]="i18n.t('itemDetail.back')">
      <svg width="37" height="24" viewBox="0 0 37 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M4.73 11.46c-.97-.52-.97-1.4 0-1.92L20.39 1.21c1.48-.79 3.89-.19 3.89.95v3.74h6.94c1.28 0 2.31.59 2.31 1.31v6.56c0 .73-1.03 1.31-2.31 1.31h-6.94v3.74c0 1.15-2.42 1.74-3.89.96L4.73 11.46Z"
          fill="#497671" fill-opacity="0.75" stroke="white" stroke-opacity="0.6" stroke-linejoin="round"/>
      </svg>
    </button>
  `,
  styles: [`
    .dexar-back-btn {
      position: sticky;
      top: 72px;
      left: 20px;
      z-index: 100;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px 4px;
      margin-bottom: -40px;
      width: fit-content;
      transition: transform 0.2s ease;
      
      svg path {
        transition: fill 0.2s ease, fill-opacity 0.2s ease;
      }

      &:hover {
        transform: scale(1.08);
        
        svg path {
          fill: #A1B4B5;
          fill-opacity: 1;
        }
      }

      &:active {
        transform: scale(0.95);
      }
    }

    @media (max-width: 768px) {
      .dexar-back-btn {
        top: 64px;
        left: 12px;
        
        svg {
          width: 30px;
          height: 20px;
        }
      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BackButtonComponent {
  i18n = inject(TranslateService);

  constructor(private location: Location) {}

  goBack(): void {
    this.location.back();
  }
}
