import { ChevronRight } from "lucide-react";
import React from "react";
import { Link } from "react-router-dom";

type CommunityListItemProps = {
  title: string;
  imageUrl: string;
  subtext: string;
  navRoute: string;
};

const CommunityListItem = ({
  title,
  imageUrl,
  subtext,
  navRoute,
}: CommunityListItemProps) => {
  return (
    <Link to={navRoute}>
    <li className="flex items-center gap-3 cursor-pointer">
      <img className="w-12 h-12 rounded" src={imageUrl} alt="community img" />
      <div className="">
        <div className="text-mono-700">{title}</div>
        <div className="text-mono-500 text-xs">{subtext}</div>
      </div>
      <span className="text-mono-500"><ChevronRight /></span>
    </li>
    </Link>
    
  );
};

export { CommunityListItem, CommunityListItemProps };
