Untitled

import React from "react";
import { Card, CardContent } from "@/components/ui/card";

const HerbMoodPost = () => {
  const moods = [
    {
      title: "Relaxation",
      herb: "Lavender",
      color: "bg-purple-300",
      icon: "🌸",
    },
    {
      title: "Energy Boost",
      herb: "Ginseng",
      color: "bg-yellow-300",
      icon: "⚡",
    },
    {
      title: "Detox & Cleanse",
      herb: "Mint",
      color: "bg-green-300",
      icon: "🍃",
    },
    {
      title: "Immunity Boost",
      herb: "Turmeric",
      color: "bg-orange-300",
      icon: "🧡",
    },
  ];

  return (
    <div className="grid grid-cols-2 gap-4 p-4">
      {moods.map((mood, index) => (
        <Card key={index} className={`${mood.color} rounded-2xl shadow-lg p-4`}>
          <CardContent className="text-center">
            <div className="text-4xl mb-2">{mood.icon}</div>
            <h2 className="text-xl font-bold mb-1">{mood.title}</h2>
            <p className="text-base">Powered by {mood.herb}</p>
          </CardContent>
        </Card>
      ))}
    </div>
  );
};

export default HerbMoodPost;