<script setup lang="ts">
import { computed } from 'vue';
import { Calendar, Clock, MapPin } from 'lucide-vue-next';
import { useI18n } from '../i18n';

const { locale, t } = useI18n();

const todayEvents = [
  {
    time: '6:30 PM',
    titleKey: 'home.today.event.familyDinner',
    locationKey: 'home.today.location.home',
    colorFrom: '#a855f7',
    colorTo: '#9333ea',
  },
  {
    time: '8:00 PM',
    titleKey: 'home.today.event.movieNight',
    locationKey: 'home.today.location.livingRoom',
    colorFrom: '#3b82f6',
    colorTo: '#2563eb',
  },
];

const formattedToday = computed(() =>
  new Intl.DateTimeFormat(locale.value, {
    weekday: 'long',
    month: 'long',
    day: 'numeric',
  }).format(new Date()),
);
</script>

<template>
  <div class="rounded-[18px] border border-white/[0.06] bg-[#16161F] p-5 shadow-[0_4px_20px_rgba(0,0,0,0.4)]">
    <div class="mb-4 flex items-center justify-between">
      <div class="flex items-center gap-2">
        <div class="flex h-9 w-9 items-center justify-center rounded-[12px] bg-purple-500/10">
          <Calendar class="h-[18px] w-[18px] text-purple-400" :stroke-width="2" />
        </div>
        <div>
          <h3 class="text-[15px] font-semibold text-white">{{ t('home.today.title') }}</h3>
          <p class="text-[12px] text-zinc-500">{{ formattedToday }}</p>
        </div>
      </div>
      <span class="text-[12px] font-medium text-zinc-600">{{ todayEvents.length }} {{ t('home.today.events') }}</span>
    </div>

    <div class="space-y-2.5">
      <div
        v-for="event in todayEvents"
        :key="event.titleKey"
        class="group flex cursor-pointer items-center gap-3 rounded-[14px] border border-white/[0.04] bg-white/[0.02] p-3.5 transition-all hover:border-white/[0.08] hover:bg-white/[0.05]"
      >
        <div class="flex min-w-[52px] flex-col items-center justify-center rounded-[10px] border border-white/[0.06] bg-white/[0.04] py-2 px-2.5">
          <Clock class="mb-1 h-3.5 w-3.5 text-zinc-500" :stroke-width="2" />
          <span class="text-[13px] font-semibold leading-none text-white">{{ event.time }}</span>
        </div>
        <div class="min-w-0 flex-1">
          <h4 class="mb-0.5 text-[14px] font-semibold text-white">{{ t(event.titleKey) }}</h4>
          <div class="flex items-center gap-1 text-zinc-500">
            <MapPin class="h-3 w-3" :stroke-width="2" />
            <span class="text-[12px]">{{ t(event.locationKey) }}</span>
          </div>
        </div>
        <div
          class="h-12 w-1.5 rounded-full opacity-60 transition-opacity group-hover:opacity-100"
          :style="{ background: `linear-gradient(to bottom, ${event.colorFrom}, ${event.colorTo})` }"
        />
      </div>
    </div>
  </div>
</template>
