attachment.component.ts

import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';

import { FileIconComponent } from '../icons/file-icon/file-icon.component';
import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.component';

@Component({
  selector: 'ods-attachment',
  standalone: true,
  imports: [CommonModule, SpinnerIconComponent, FileIconComponent],
  styles: [':host {@apply flex border-b border-black/25 last:border-b-0}'],
  template: `<button
    class="relative flex w-full gap-3 rounded-md border bg-background-100 px-3 py-2 last:border-none hover:bg-ozggray-200"
  >
    <div class="flex-shrink">
      <ods-file-icon *ngIf="!isLoading" [fileType]="fileType" size="large" />
      <ods-spinner-icon *ngIf="isLoading" size="lg" />
    </div>
    <div class="flex grow flex-col items-start break-all text-text">
      <p class="text-start text-sm">{{ documentName }}</p>
      <p class="text-xs text-ozggray-600">{{ description }}</p>
    </div>
    <ng-content select="[close]"></ng-content>
  </button>`,
})
export class AttachmentComponent {
  @Input() documentName!: string;
  @Input() description = '';
  @Input() fileType!: string;
  @Input() isLoading: boolean = false;
}