'use client';
import { useRef } from 'react';
import type { Template } from '@/lib/templates';
export function TemplateCard({ t }: { t: Template }) {
  const v = useRef<HTMLVideoElement>(null);
  return (
    <div className="group" onMouseEnter={() => v.current?.play()} onMouseLeave={() => { v.current?.pause(); }}>
      <div className="relative aspect-[9/16] overflow-hidden bg-paper-3">
        <video ref={v} src={`/ornekler/${t.id}.mp4`} poster={`/ornekler/${t.id}.jpg`} muted loop playsInline preload="none" className="h-full w-full object-cover" />
      </div>
      <h3 className="mt-3 font-display text-[22px]">{t.name}</h3>
      <p className="mt-1 text-[14px] leading-snug text-ink-soft">{t.tagline}</p>
    </div>
  );
}