import * as React from 'react';
import { useRouter } from "next/navigation";
import EnhancedCard from './EnhancedCard';

interface MediaData {
  _id: string;
  fileName: string;
  fileType: string;
  isDeleted: boolean;
  createdAt: string;
  updatedAt: string;
  fileUrl: string;
  thumbnail: string | null;
}

interface TestimonialData {
  _id: string;
  fullName: string;
  designation: string;
  content: string;
  createdAt: string;
  updatedAt: string;
  profileImageData: MediaData;
}

export interface TestimonialCardProps {
  testimonial: TestimonialData;
  totalTestimonials?: number;
  onEdit?: (testimonial: TestimonialData) => void;
  onDelete?: (id: string) => void;
  onRefetch?: () => void;
}

function stripHtml(html: string): string {
  if (!html) return '';
  return html.replace(/<[^>]+>/g, '');
}

export function AboutTestimonials({ 
  testimonial,
  onEdit,
  onDelete,
  onRefetch 
}: TestimonialCardProps): React.JSX.Element {
  const router = useRouter();

  const handleView = (id: string) => {
    router.push(`/dashboard/testimonialDetail?testimonialId=${id}`);
  };

  const handleEdit = (id: string) => {
    if (onEdit) {
      onEdit(testimonial);
    }
  };

  const handleDelete = (id: string) => {
    if (onDelete) {
      onDelete(id);
    }
  };

  return (
    <EnhancedCard
      id={testimonial._id}
      title={testimonial.fullName}
      content={stripHtml(testimonial.content)}
      author={testimonial.fullName}
      avatar={testimonial.profileImageData?.fileUrl}
      date={testimonial.createdAt}
      type="testimonial"
      category={testimonial.designation}
      onView={handleView}
      onEdit={handleEdit}
      onDelete={handleDelete}
    />
  );
}