<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import { Link } from "@inertiajs/vue3";
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/Components/ui/card";
import { MessageSquareIcon, MailIcon } from "lucide-vue-next";
</script>

<template>
  <AppLayout title="Paketi">
    <div class="mb-6">
      <h1 class="text-2xl font-bold tracking-tight">Paketi</h1>
      <p class="text-sm text-muted-foreground">Izberite vrsto paketa za pošiljanje</p>
    </div>

    <div class="grid gap-4 sm:grid-cols-2 max-w-2xl">
      <Link :href="route('packages.sms.index')">
        <Card class="cursor-pointer hover:border-primary transition-colors h-full">
          <CardHeader>
            <div class="flex items-center gap-3 mb-2">
              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                <MessageSquareIcon class="h-5 w-5 text-primary" />
              </div>
            </div>
            <CardTitle>SMS paketi</CardTitle>
            <CardDescription>Pošlji SMS sporočila v paketu prejemnikom iz pogodb ali ročno vnesenih številk</CardDescription>
          </CardHeader>
        </Card>
      </Link>

      <Link :href="route('packages.email.index')">
        <Card class="cursor-pointer hover:border-primary transition-colors h-full">
          <CardHeader>
            <div class="flex items-center gap-3 mb-2">
              <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
                <MailIcon class="h-5 w-5 text-primary" />
              </div>
            </div>
            <CardTitle>E-mail paketi</CardTitle>
            <CardDescription>Pošlji e-mail sporočila v paketu prejemnikom iz pogodb z e-mail predlogami</CardDescription>
          </CardHeader>
        </Card>
      </Link>
    </div>
  </AppLayout>
</template>
