import React from 'react';
import { mdiHeart, mdiHeartOutline, mdiChatOutline, mdiSendOutline, mdiBookmarkOutline } from '@mdi/js';
import BaseIcon from '../BaseIcon';
import UserAvatar from '../UserAvatar';
import dataFormatter from '../../helpers/dataFormatter';
import Link from 'next/link';

type Props = {
  post: any;
  onLike?: (id: string) => void;
  onComment?: (id: string) => void;
};

export default function SocialPostCard({ post, onLike, onComment }: Props) {
  const imageUrl = post.images && post.images[0] ? post.images[0].publicUrl : null;
  const authorName = post.author ? `${post.author.firstName} ${post.author.lastName}` : 'Anonymous';
  const authorAvatar = post.author ? post.author.avatar : null;

  return (
    <div className="bg-white dark:bg-[#1a1d23] border border-gray-200 dark:border-gray-800 rounded-2xl overflow-hidden mb-6 max-w-lg mx-auto shadow-sm">
      {/* Header */}
      <div className="flex items-center justify-between p-4">
        <div className="flex items-center space-x-3">
          <UserAvatar username={authorName} image={authorAvatar} className="w-10 h-10" />
          <div>
            <p className="font-bold text-sm dark:text-white">{authorName}</p>
            {post.location_name && <p className="text-xs text-gray-500 dark:text-gray-400">{post.location_name}</p>}
          </div>
        </div>
        <button className="text-gray-500 dark:text-gray-400">
          <span className="text-xl font-bold">···</span>
        </button>
      </div>

      {/* Image/Video */}
      <div className="aspect-square bg-gray-100 dark:bg-gray-900 flex items-center justify-center overflow-hidden">
        {imageUrl ? (
          <img src={imageUrl} alt="Post content" className="w-full h-full object-cover" />
        ) : (
          <div className="text-gray-400 italic">No media</div>
        )}
      </div>

      {/* Interactions */}
      <div className="p-4 space-y-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-4">
            <button onClick={() => onLike && onLike(post.id)} className="hover:scale-110 transition-transform">
              <BaseIcon path={mdiHeartOutline} size={28} className="dark:text-white" />
            </button>
            <button onClick={() => onComment && onComment(post.id)} className="hover:scale-110 transition-transform">
              <BaseIcon path={mdiChatOutline} size={26} className="dark:text-white" />
            </button>
            <button className="hover:scale-110 transition-transform">
              <BaseIcon path={mdiSendOutline} size={26} className="dark:text-white" />
            </button>
          </div>
          <button className="hover:scale-110 transition-transform">
            <BaseIcon path={mdiBookmarkOutline} size={26} className="dark:text-white" />
          </button>
        </div>

        {/* Likes Count */}
        <p className="text-sm font-bold dark:text-white">
          {post.post_reactions_count || 0} likes
        </p>

        {/* Caption */}
        <div className="text-sm space-x-2">
          <span className="font-bold dark:text-white">{authorName}</span>
          <span className="dark:text-gray-300">{post.caption}</span>
        </div>

        {/* View Comments */}
        {post.post_comments_count > 0 && (
          <button className="text-sm text-gray-500 dark:text-gray-400">
            View all {post.post_comments_count} comments
          </button>
        )}

        {/* Time */}
        <p className="text-[10px] text-gray-400 uppercase tracking-wider">
          {dataFormatter.dateTimeFormatter(post.published_at)}
        </p>
      </div>
    </div>
  );
}
