Hi. I have items that are represented as lines. I'd like to have functionality where the user can click a line and the filterered result changes to that line's index.

onSelectItem is returning error:

Type '{ items: Item[]; activeIndex: number; onSelectItem: (index: number, onSelectItem: (index: number, item: Item) => void) => void; }' is not assignable to type 'IntrinsicAttributes & ItemLinesProps'.
  Property 'onSelectItem' does not exist on type 'IntrinsicAttributes & ItemLinesProps'.ts(2322)

Here's the relevant code:

// ItemLines.tsx

import React from "react";
import { motion } from "framer-motion";
import { Minus } from "lucide-react";
import "./ItemLines.scss";

interface ItemLinesProps {
  items: Item[];
  activeIndex: number;
  onSelectItem: (index: number, item: Item) => void; // Add onSelectItem prop
}

interface Item {
  id: number;
  title: string;
  img: string;
  // ... other properties
}

const ItemLines: React.FC<ItemLinesProps> = ({
  items,
  activeIndex,
  onSelectItem,
}) => {
  return (
    <div className="item-lines">
      {items.map((item, index) => (
        <motion.div
          key={item.id}
          className={`item-line-image ${index === activeIndex ? "active" : ""}`}
          initial={{ scale: 0.8, opacity: 0.2 }}
          animate={{ scale: index === activeIndex ? 1.5 : 0.8, opacity: 1 }}
          onClick={() => onSelectItem(index, item)}
        >
          <Minus size={16} strokeWidth={1.5} stroke="black" />
        </motion.div>
      ))}
    </div>
  );
};

export default ItemLines;