import Logo from '@/components/Logo';
import { Box } from '@mui/material';
import type { ReactElement } from 'react';

export interface Product {
  id: string;
  titleKey: string;
  descriptionKey: string;
  LogoComponent: ReactElement;
  demoLink: string;
  color: string;
}

export const productsData: Product[] = [
  {
    id: 'harmony-club',
    titleKey: 'products.harmonyClub.title',
    descriptionKey: 'products.harmonyClub.description',
    LogoComponent: (
      <Box
        component="img"
        src="/src/assets/club-logo.png"
        sx={{ width: 69, aspectRatio: '1 / 1', objectFit: 'contain' }}
      />
    ), // Reference the component
    demoLink: 'https://business-harmony.com/club/',
    color: '#ff5722',
  },
  {
    id: 'harmony-book',
    titleKey: 'products.harmonyBook.title',
    descriptionKey: 'products.harmonyBook.description',
    LogoComponent: (
      <Box
        component="img"
        src="/src/assets/book-logo.png"
        sx={{ width: 69, aspectRatio: '1 / 1', objectFit: 'contain', px: 0.5 }}
      />
    ), // Reference the component
    demoLink: 'https://business-harmony.com/book/',
    color: '#d3365d',
  },
  // add more products here
];