Untitled

import React, { useState } from 'react';

const PostCard = ({ userProfilePic, postImage, initialLikes, postDescription }) => {
  const [likes, setLikes] = useState(0);
  const [showOptions, setShowOptions] = useState(false);

  const handleLike = () => {
    setLikes(currentLikes => currentLikes + 1);
  };

  const handleComment = () => {
    // Logic to handle comment action
  };

  const handleBookmark = () => {
    // Logic to handle bookmark action
  };

  const toggleOptions = () => {
    setShowOptions(!showOptions);
  };

  return (
    <div className="container mx-auto px-20">
      <div className="min-h-48 flex items-center justify-center p-20 px-6">
        <div className="bg-coolGray-900 text-coolGray-100 rounded-md shadow-md sm:w-96">
          <div className="flex items-center justify-between p-3">
            <div className="flex items-center space-x-2">
              <img src="https://media.gq.com.mx/photos/5fd51c587938a266e30f81d1/16:9/w_1920,c_limit/Deadpool.jpg" alt="" className="bg-coolGray-500 border-coolGray-700 h-8 w-8 rounded-full object-cover object-center shadow-sm" />
              <div className="-space-y-1">
                <h2 className="text-sm font-semibold leading-none">nameUser</h2>
              </div>
            </div>
            <button onClick={toggleOptions} title="Open options" type="button">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
              </svg>

            </button>
            {showOptions && (
              <div className="absolute bg-white rounded shadow-md ml-64">
                <ul>
                  <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">Edit</li>
                  <li className="px-4 py-2 hover:bg-gray-100 cursor-pointer">Delete</li>
                </ul>
              </div>
            )}
          </div>
          <img src="https://i.pinimg.com/564x/1c/02/67/1c02674dcd5747a0258694d69ab84572.jpg" alt="" className="bg-coolGray-500 h-70 w-full object-cover object-center" />
          <div className="p-3">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-3">
                <button onClick={handleLike} title="Like post" className="flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-5 w-5 fill-current">
                    <path d="M453.122,79.012a128,128,0,0,0-181.087.068l-15.511,15.7L241.142,79.114l-.1-.1a128,128,0,0,0-181.02,0l-6.91,6.91a128,128,0,0,0,0,181.019L235.485,449.314l20.595,21.578.491-.492.533.533L276.4,450.574,460.032,266.94a128.147,128.147,0,0,0,0-181.019ZM437.4,244.313,256.571,425.146,75.738,244.313a96,96,0,0,1,0-135.764l6.911-6.91a96,96,0,0,1,135.713-.051l38.093,38.787,38.274-38.736a96,96,0,0,1,135.765,0l6.91,6.909A96.11,96.11,0,0,1,437.4,244.313Z"></path>
                  </svg>
                </button>
                <button onClick={handleComment} title="Add a comment" className="flex items-center justify-center">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-5 w-5 fill-current">
                    <path d="M496,496H480a273.39,273.39,0,0,1-179.025-66.782l-16.827-14.584C274.814,415.542,265.376,416,256,416c-63.527,0-123.385-20.431-168.548-57.529C41.375,320.623,16,270.025,16,216S41.375,111.377,87.452,73.529C132.615,36.431,192.473,16,256,16S379.385,36.431,424.548,73.529C470.625,111.377,496,161.975,496,216a171.161,171.161,0,0,1-21.077,82.151,201.505,201.505,0,0,1-47.065,57.537,285.22,285.22,0,0,0,63.455,97L496,457.373ZM294.456,381.222l27.477,23.814a241.379,241.379,0,0,0,135,57.86,317.5,317.5,0,0,1-62.617-105.583v0l-4.395-12.463,9.209-7.068C440.963,305.678,464,262.429,464,216c0-92.636-93.309-168-208-168S48,123.364,48,216s93.309,168,208,168a259.114,259.114,0,0,0,31.4-1.913Z"></path>
                  </svg>
                </button>
              </div>
              <button onClick={handleBookmark} title="Bookmark post" className="flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="h-5 w-5 fill-current">
                  <path d="M424,496H388.75L256.008,381.19,123.467,496H88V16H424ZM120,48V456.667l135.992-117.8L392,456.5V48Z"></path>
                </svg>
              </button>
            </div>
            <div className="flex flex-wrap items-center pb-1 pt-3">
              <div className="flex items-center space-x-2">
                <div className="ml-2 text-sm font-semibold">{likes} Me gusta </div>
              </div>
            </div>
            <div className="mt-2 text-sm font-semibold">{postDescription}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default PostCard;