import Icons from '../../../utils/icons/icons'
import appColors from '../../../theme/appColors'
import { useSelector } from 'react-redux'

export const rideIcons = [
  <Icons.Wallet />,
  <Icons.smartCar />,
  <Icons.SmallCar2 color={appColors.primary} />,
  <Icons.Ride color={appColors.primary} />,
]

// Custom hook to generate translated filter options
export const useFilterOptions = () => {
  const { translateData } = useSelector((state: any) => state.setting)

  return [
    {
      id: 'petrol',
      label: translateData?.petrol,
    },
    {
      id: 'garage',
      label: translateData?.garage,
    },
    {
      id: 'parking',
      label: translateData?.parking,
    },
    {
      id: 'carwash',
      label: translateData?.carwash,
    },
    {
      id: 'ev',
      label: translateData?.ev,
    },
  ]
}
