import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';

// Shared Components
import { DataTableComponent } from '../../shared/components/data-table/data-table.component';
import { GenericCardComponent } from '../../shared/components/generic-card/generic-card.component';
import { TypographyShowcaseComponent } from '../../shared/components/typography-showcase/typography-showcase.component';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';

@Component({
  selector: 'app-design-system',
  standalone: true,
  imports: [
    CommonModule, 
    MatButtonModule, 
    MatIconModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    DataTableComponent,
    GenericCardComponent,
    TypographyShowcaseComponent
  ],
  templateUrl: './design-system.component.html',
  styleUrls: ['./design-system.component.scss']
})
export class DesignSystemComponent {
  
  // Exemplo de dados para a DataTable
  tableColumns = [
    { key: 'vehicle', label: 'Vehicle' },
    { key: 'driver', label: 'Driver' },
    { key: 'status', label: 'Status' },
    { key: 'actions', label: 'Actions' }
  ];

  tableData = [
    { vehicle: 'Volvo FH 540', driver: 'João Silva', status: 'Moving', actions: '' },
    { vehicle: 'Scania R450', driver: 'Maria Oliveira', status: 'Stopped', actions: '' },
    { vehicle: 'Mercedes Actros', driver: 'Pedro Santos', status: 'Maintenance', actions: '' },
  ];

  constructor() {}
}
