import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { environment } from '../../../environments/environment';

@Component({
  selector: 'app-back-button',
  template: `
    @if (!isnovo) {
      <button class="dexar-back-btn" (click)="goBack()" aria-label="Назад">
        <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: fixed;
      top: 76px;
      left: 20px;
      z-index: 100;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
      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: 68px;
        left: 12px;
        
        svg {
          width: 30px;
          height: 20px;
        }
      }
    }
  `]
})
export class BackButtonComponent {
  isnovo = environment.theme === 'novo';

  constructor(private location: Location) {}

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