<template>
  <div class="subject-card" @click="handleClick">
    <h3 class="subject-title">{{ title }}</h3>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const props = defineProps<{ title: string }>()
const router = useRouter()

const handleClick = () => {
  router.push({ name: 'subject-detail', params: { subject: props.title } })
}
</script>

<style scoped lang="scss">
.subject-card {
  width: 100%;
  height: 100%;
  padding: 80px;
  box-sizing: border-box;
  border-radius: 24px;
  background: #fff;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(61, 120, 242, 0.15);
  }

  &:active {
    transform: translateY(-1px);
  }
}

.subject-title {
  font-size: 44px;
  font-weight: 600;
  color: #121212;
}
</style>
