"use client";

import React from "react";

const MatchCardSkeleton = () => {
  return (
    <section className="rounded-lg min-h-[300px] overflow-hidden border border-gray-200 flex flex-col justify-between animate-pulse">
      {/* Cover Photo */}
      <div className="relative h-30 w-full bg-gray-200 h-[120px]" />

      {/* Profile Avatar */}
      <div className="flex justify-center -mt-8 z-10">
        <div className="h-16 w-16 rounded-full border-4 border-white bg-gray-300" />
      </div>

      {/* Card Content */}
      <div className="pt-5 px-2 pb-3 flex flex-col justify-between gap-3">
        <div className="flex items-center justify-between">
          <div className="h-4 bg-gray-300 w-2/3 rounded" />
          <div className="h-4 bg-gray-300 w-1/4 rounded" />
        </div>

        <div className="flex items-center justify-between gap-1">
          <div className="h-3 bg-gray-300 w-1/3 rounded" />
          <div className="h-5 w-24 bg-gray-200 rounded-full" />
        </div>

        <div className="h-12 bg-gray-200 rounded-md" />

        <div className="flex items-center justify-between mt-2">
          <div className="h-8 bg-gray-300 w-[100px] rounded-full" />
          <div className="h-10 w-10 bg-gray-300 rounded-full" />
        </div>
      </div>
    </section>
  );
};

export default MatchCardSkeleton;
