import { Component, input } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { RouterModule } from '@angular/router';

@Component({
  selector: 'app-link-card',
  imports: [MatCardModule, RouterModule],
  template: `
    <mat-card [appearance]="appearance()" class="min-h-24 h-full">
      <mat-card-content class="h-full !p-0">
        <div class="h-full w-full flex justify-center items-stretch">
          <div class="p-2 h-full w-full">
            <ng-content></ng-content>
          </div>
          <div
            class="border-l pl-2 pr-2 basis-10 flex justify-center items-center cursor-pointer group"
            style="color: var(--mat-sys-on-background); border-color: var(--mat-sys-outline)"
            [routerLink]="target()"
          >
            <svg
              class="group-hover:scale-115 transition ease-in-out duration-200"
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 30 100"
              preserveAspectRatio="xMidYMid meet"
            >
              <path
                d="M5 10 L25 50 L5 90"
                fill="none"
                stroke="currentColor"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  `,
  styles: ``,
})
export class LinkCardComponent {
  appearance = input<'raised' | 'outlined'>('raised');
  target = input.required<string>();
}
