<script setup lang="ts">
import { ref } from "vue";
const projects = ref([
  {
    title: "배터리 상태 예측 모델 프로젝트",
    creator: "ADMIN_001",
    date: "2025-04-22",
    description:
      "센서 데이터를 기반으로 배터리 상태를 예측하는 프로젝트입니다.",
  },
  {
    title: "운전행동 예측 모델 프로젝트",
    creator: "ADMIN_001",
    date: "2025-03-02",
    description: "급가속, 급제동 등 운전 행동을 기반으로 모델을 예측합니다.",
  },
  {
    title: "강화학습 기반 경로 생성 모델 프로젝트",
    creator: "ADMIN_001",
    date: "2025-01-20",
    description: "지도 기반 환경에서 최적 경로를 생성하는 모델입니다.",
  },
  {
    title: "교통 표지판 인식모델 프로젝트",
    creator: "USER_001",
    date: "2024-12-12",
    description: "지도 기반 환경에서 최적 경로를 생성하는 모델입니다.",
  },
]);
</script>

<template>
  <v-container class="mt-12" style="max-width: 1600px">
    <v-row class="mb-6" align="center" justify="space-between">
      <v-col cols="auto">
        <h2 class="font-weight-bold text-h5">Project Selection</h2>
      </v-col>
      <v-col cols="auto">
        <v-btn
          color="secondary"
          variant="flat"
          class="text-white font-weight-bold"
          @click="onAddProject"
        >
          <v-icon left icon="mdi-plus" size="20" />
          Create Project
        </v-btn>
      </v-col>
    </v-row>

    <v-row dense>
      <v-col
        v-for="(project, index) in projects"
        :key="index"
        cols="12"
        sm="6"
        md="6"
        lg="6"
      >
        <v-card
          class="pa-4"
          color="primary"
          variant="elevated"
          elevation="6"
          rounded="lg"
          @click="() => console.log(`Selected: ${project.title}`)"
        >
          <v-card-title class="d-flex align-center">
            <v-icon color="#6EC1E4" icon="mdi-file" start size="18" />
            <h4>{{ project.title }}</h4>
          </v-card-title>

          <v-card-subtitle
            class="text-white text-caption d-flex justify-space-between"
          >
            <span>생성자: {{ project.creator }}</span>
            <span>등록일: {{ project.date }}</span>
          </v-card-subtitle>

          <v-card-text
            class="text-white mt-3 text-body-2"
            style="white-space: normal"
          >
            {{ project.description }}
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped></style>
