Feature Polaroid Section

import { FeaturePolaroidSection, Feature } from "@/components/ui/feature-polaroid-section";

// Sample data for the features
const featuresData: Feature[] = [
  {
    title: "Signature packages",
    description: "Curated menus & selections across the best spots in town.",
    imageSrc: "https://images.pexels.com/photos/262978/pexels-photo-262978.jpeg?auto=compress&cs=tinysrgb&w=600",
    imageAlt: "Group of friends dining together",
  },
  {
    title: "Peak hour booking",
    description: "Skip the queue - priority entry at top restaurants.",
    imageSrc: "https://images.pexels.com/photos/941861/pexels-photo-941861.jpeg?auto=compress&cs=tinysrgb&w=600",
    imageAlt: "Couple having a drink at a bar",
  },
  {
    title: "On-the-house",
    description: "Complimentary delights along with your favourite meals.",
    imageSrc: "https://images.pexels.com/photos/1267320/pexels-photo-1267320.jpeg?auto=compress&cs=tinysrgb&w=600",
    imageAlt: "Friends toasting with drinks over a large meal",
  },
];

// SVG component for the decorative underline
const Underline = () => (
  <svg
    className="absolute left-0 top-full w-full h-3"
    viewBox="0 0 196 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    preserveAspectRatio="none"
  >
    <path
      d="M2 9.75184C32.0084 4.50095 106.326 -2.49905 194 9.75184"
      stroke="hsl(var(--primary))"
      strokeWidth="4"
      strokeLinecap="round"
    />
  </svg>
);


export default function FeaturePolaroidSectionDemo() {
  // Custom title with the styled underline, passed as a ReactNode
  const customTitle = (
    <>
      Enjoy iconic{" "}
      <span className="relative inline-block px-2">
        District specials
        <Underline />
      </span>
    </>
  );

  return (
    <div className="w-full bg-background">
      <FeaturePolaroidSection title={customTitle} features={featuresData} />
    </div>
  );
}