<script setup lang="ts">
import { Activity, CreditCard, Popcorn, ShoppingCart, Users } from 'lucide-vue-next';
import { useI18n } from '../i18n';

const { t } = useI18n();

const activities = [
  {
    icon: ShoppingCart,
    titleKey: 'home.activity.shopping',
    subtitleKey: 'home.activity.shoppingSubtitle',
    time: '2h',
    bgColor: 'bg-emerald-500/10',
    textColor: 'text-emerald-400',
  },
  {
    icon: Popcorn,
    titleKey: 'home.activity.movieVote',
    subtitleKey: 'home.activity.movieVoteSubtitle',
    time: '5h',
    bgColor: 'bg-purple-500/10',
    textColor: 'text-purple-400',
  },
  {
    icon: CreditCard,
    titleKey: 'home.activity.subscription',
    subtitleKey: 'home.activity.subscriptionSubtitle',
    time: '1d',
    bgColor: 'bg-rose-500/10',
    textColor: 'text-rose-400',
  },
  {
    icon: Users,
    titleKey: 'home.activity.newEvent',
    subtitleKey: 'home.activity.newEventSubtitle',
    time: '2d',
    bgColor: 'bg-blue-500/10',
    textColor: 'text-blue-400',
  },
];
</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-blue-500/10">
          <Activity class="h-[18px] w-[18px] text-blue-400" :stroke-width="2" />
        </div>
        <h3 class="text-[15px] font-semibold text-white">{{ t('home.activity.title') }}</h3>
      </div>
      <button class="text-[12px] font-medium text-purple-400 transition-colors hover:text-purple-300">
        {{ t('home.activity.viewAll') }}
      </button>
    </div>

    <div class="space-y-2">
      <div
        v-for="activity in activities"
        :key="activity.titleKey"
        class="group flex cursor-pointer items-center gap-3 rounded-[12px] p-3 transition-all hover:bg-white/[0.03]"
      >
        <div :class="['flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[12px] transition-transform group-hover:scale-110', activity.bgColor]">
          <component :is="activity.icon" :class="['h-[18px] w-[18px]', activity.textColor]" :stroke-width="2" />
        </div>
        <div class="min-w-0 flex-1">
          <p class="mb-0.5 text-[14px] font-medium text-white">{{ t(activity.titleKey) }}</p>
          <p class="truncate text-[12px] text-zinc-500">{{ t(activity.subtitleKey) }}</p>
        </div>
        <span class="flex-shrink-0 text-[12px] font-medium text-zinc-600">{{ activity.time }}</span>
      </div>
    </div>
  </div>
</template>
