---
// src/components/GenericKarticaItem.astro
import { getStatusColorClass } from "../utils/ui";

interface Props {
  href: string;
  status: string;
  statusBojaClass?: string;
  ikona: string;
  naslov: string;
  subNaslov?: string;
  metaTekst: string;
  statusPrikaz: string;
  bojaTeme?: "blue" | "indigo" | "emerald" | "red"; // Podrška za teme
}

const { 
  href, 
  status, 
  statusBojaClass, 
  ikona, 
  naslov, 
  subNaslov, 
  metaTekst, 
  statusPrikaz,
  bojaTeme = "blue" 
} = Astro.props;

// Mapiranje tema na Tailwind klase
const themes = {
  blue: {
    hover: "hover:bg-blue-50/30 dark:hover:bg-blue-900/10",
    text: "group-hover:text-blue-600 dark:group-hover:text-blue-400",
    iconBg: "group-hover:bg-blue-600",
    arrow: "group-hover:text-blue-600"
  },
  indigo: {
    hover: "hover:bg-indigo-50/30 dark:hover:bg-indigo-900/10",
    text: "group-hover:text-indigo-600 dark:group-hover:text-indigo-400",
    iconBg: "group-hover:bg-indigo-600",
    arrow: "group-hover:text-indigo-600"
  },
  emerald: {
    hover: "hover:bg-emerald-50/30 dark:hover:bg-emerald-900/10",
    text: "group-hover:text-emerald-600 dark:group-hover:text-emerald-400",
    iconBg: "group-hover:bg-emerald-600",
    arrow: "group-hover:text-emerald-400"
  }
};

const activeTheme = themes[bojaTeme] || themes.blue;
const resolvedStatusColor = statusBojaClass || getStatusColorClass(status);
---

<a 
  href={href} 
  class:list={[
    "nalog-item flex items-center justify-between p-8 border-b border-gray-50 dark:border-gray-700 last:border-0 group transition-all duration-300",
    activeTheme.hover
  ]}
  data-status={status}
>
  <div class="flex items-center gap-6 text-left">
    <!-- Ikona s dinamičkom bojom na hoveru -->
    <div class:list={[
      "w-14 h-14 rounded-2xl flex items-center justify-center text-xl shadow-inner transition-all duration-300 bg-gray-50 dark:bg-gray-900 text-gray-400 group-hover:text-white",
      activeTheme.iconBg
    ]}>
      <i class:list={["fa-solid", ikona, status === 'u_radu' ? 'animate-pulse' : '']}></i>
    </div>
    
    <div class="flex flex-col">
      <div class="flex items-center gap-3">
        <span class:list={[
          "font-black text-gray-900 dark:text-white text-xl uppercase tracking-tighter italic transition-colors leading-none",
          activeTheme.text
        ]}>
          {naslov}
        </span>
        {subNaslov && (
          <span class="text-[10px] font-black bg-gray-900 text-white px-2 py-0.5 rounded border border-gray-700 uppercase tracking-[0.2em]">
            {subNaslov}
          </span>
        )}
      </div>
      
      <span class="text-gray-400 text-[10px] font-black uppercase tracking-widest mt-2 italic leading-none">
          {metaTekst}
      </span>
    </div>
  </div>
  
  <div class="flex items-center gap-8">
    <!-- Status indikator desno -->
    <div class="hidden lg:flex flex-col items-end text-right">
      <div class="flex items-center gap-2 mb-1">
        <div class:list={["w-2 h-2 rounded-full", resolvedStatusColor]}></div>
        <span class="text-[8px] font-black uppercase text-gray-400 tracking-[0.2em]">Status</span>
      </div>
      <span class:list={[
        "text-xs font-black uppercase italic transition-colors",
        status === 'zavrseno' || status === 'naplaceno' || status === 'aktivan' ? 'text-emerald-500' : activeTheme.text
      ]}>
          {statusPrikaz}
      </span>
    </div>
    
    <!-- Strelica -->
    <i class:list={[
      "fa-solid fa-arrow-right-long text-gray-200 group-hover:translate-x-2 transition-all duration-300",
      activeTheme.arrow
    ]}></i>
  </div>
</a>