Cyber Feature Card

'use client';

import type { ReactNode } from 'react';
import './CyberFeatureCard.css';

/**
 * CyberFeatureCard — A feature card with sharp angles and neon stroke animations.
 * 
 * @param {string} title - The main headline of the feature card.
 * @param {string} subtitle - Optional description context.
 */
export interface CyberFeatureCardProps {
  title: string;
  subtitle?: string;
  children?: ReactNode;
}

export function CyberFeatureCard({ title, subtitle,
  children
}: CyberFeatureCardProps) {
  return (
    <>
      <div className="cyber-card" data-rk-3d31cd="">
        <div className="cyber-card__glitch-line" data-rk-3d31cd=""></div>
        <h3 className="cyber-card__title" data-rk-3d31cd="">{title}</h3>
        {subtitle && <p className="cyber-card__subtitle" data-rk-3d31cd="">{subtitle}</p>}
        {children}
      </div>
    </>
  );
}

export default CyberFeatureCard;

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

.cyber-card:where([data-rk-3d31cd]) { 
  background: var(--c-bg-elev, #000); 
  color: var(--c-text-1, #00e0ff); 
  border: 1px solid var(--c-primary, #ff003c); 
  padding: var(--sp-6, 1.5rem); 
  clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%); 
  position: relative; 
}
.cyber-card__glitch-line:where([data-rk-3d31cd]) { 
  position: absolute; 
  height: 1px; 
  width: 100%; 
  background: var(--c-primary, #ff003c); 
  top: 10%; left: 0; 
  opacity: 0.5; 
  animation: cyber-feature-card-glitch-anim 4s infinite; 
}
.cyber-card__title:where([data-rk-3d31cd]) {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  color: var(--c-text-1);
}
.cyber-card__subtitle:where([data-rk-3d31cd]) {
  margin: 0;
  font-size: 0.9rem;
  color: var(--c-text-2, #ccc);
}

@keyframes cyber-feature-card-glitch-anim { 
  0%, 100% { top: 10%; } 
  50% { top: 90%; } 
}