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 StoryData {
  _id: string;
  fullName: string;
  content: string;
  createdAt: string;
  updatedAt: string;
  profileImageData: MediaData;
}

export interface StoryCardProps {
  story: StoryData;
  totalSuccessStories?: number;
  onEdit?: (story: StoryData) => void;
  onDelete?: (id: string) => void;
  onRefetch?: () => void;
}

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

export function AboutStories({ 
  story,
  onEdit,
  onDelete,
  onRefetch 
}: StoryCardProps): React.JSX.Element {
  const router = useRouter();

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

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

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

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