Glow Portfolio Card

'use client';

import type { CSSProperties, ReactNode } from 'react';
import './GlowPortfolioCard.css';

/** "a: b; --c: d" → style object */
function st(css: string | undefined): CSSProperties {
  const o: Record<string, string> = {};
  for (const decl of String(css ?? '').split(';')) {
    const i = decl.indexOf(':');
    if (i < 0) continue;
    const k = decl.slice(0, i).trim();
    if (k) o[k.startsWith('--') ? k : k.replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = decl.slice(i + 1).trim();
  }
  return o as CSSProperties;
}

/**
 * GlowPortfolioCard — Card with a hovering background glow that follows the card edges.
 * 
 * @param {string} title - Project title heading.
 * @param {string} subtitle - Project metadata (e.g. "Web design / 2024").
 * @param {string} glowColor - Optional. Hex color for the animated border glow. Default is '#6366f1'.
 */
export interface GlowPortfolioCardProps {
  title: string;
  subtitle: string;
  glowColor?: string;
  children?: ReactNode;
}

export function GlowPortfolioCard({ title, subtitle, glowColor = 'var(--c-primary, #6366f1)',
  children
}: GlowPortfolioCardProps) {
  return (
    <>
      <div className="glow-wrap" style={st(`--glow-color: ${glowColor};`)} data-rk-a93656="">
        <div className="glow-content" data-rk-a93656="">
          <h3 className="glow-content__title" data-rk-a93656="">{title}</h3>
          <p className="glow-content__subtitle" data-rk-a93656="">{subtitle}</p>
          {children}
        </div>
      </div>
    </>
  );
}

export default GlowPortfolioCard;

/* GlowPortfolioCard — ported from astro-component-kit (cards/GlowPortfolioCard.astro) */

.glow-wrap:where([data-rk-a93656]) { 
  position: relative; 
  padding: 2px; 
  border-radius: var(--r-xl, 20px); 
  background: var(--c-border, rgba(255,255,255,0.1)); 
  overflow: hidden; 
}
.glow-wrap:where([data-rk-a93656])::before { 
  content: ''; 
  position: absolute; 
  inset: -50%; 
  background: conic-gradient(from 0deg, transparent, var(--glow-color), transparent); 
  animation: glow-portfolio-card-rotate-glow 4s linear infinite; 
}
.glow-content:where([data-rk-a93656]) { 
  position: relative; 
  background: var(--c-bg, #080b14); 
  padding: var(--sp-8, 2rem); 
  border-radius: calc(var(--r-xl, 20px) - 2px); 
  z-index: 1; 
  text-align: center; 
}
.glow-content__title:where([data-rk-a93656]) { margin: 0; color: var(--c-text-1, #fff); font-size: 1.25rem; }
.glow-content__subtitle:where([data-rk-a93656]) { color: var(--c-text-2, #94a3b8); font-size: 0.9rem; margin-top: 0.5rem; }

@keyframes glow-portfolio-card-rotate-glow { 100% { transform: rotate(360deg); } }