import { useNavigate } from 'react-router-dom';
import { SettingsLayout } from '@/routes/Settings/components/SettingsLayout';
import { Mail, Send, Tag } from 'lucide-react';
import { __ } from '@/lib/i18n';

interface MarketingCard {
  title: string;
  description: string;
  icon: React.ElementType;
  to: string;
}

const cards: MarketingCard[] = [
  {
    title: __('Newsletter'),
    description: __('Manage subscribers and email templates'),
    icon: Mail,
    to: '/marketing/newsletter',
  },
  {
    title: __('Campaigns'),
    description: __('Create and send email campaigns'),
    icon: Send,
    to: '/marketing/campaigns',
  },
  {
    title: __('Coupons'),
    description: __('Discounts, promotions, and coupon codes'),
    icon: Tag,
    to: '/marketing/coupons',
  },
];

export default function Marketing() {
  const navigate = useNavigate();

  return (
    <SettingsLayout
      title={__('Marketing')}
      description={__('Newsletter, campaigns, and promotions')}
    >
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {cards.map((card) => (
          <button
            key={card.to}
            onClick={() => navigate(card.to)}
            className="flex items-start gap-4 p-6 rounded-lg border bg-card hover:bg-accent transition-colors text-left"
          >
            <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
              <card.icon className="w-5 h-5" />
            </div>
            <div className="flex-1 min-w-0">
              <div className="font-medium">{card.title}</div>
              <div className="text-sm text-muted-foreground mt-1">
                {card.description}
              </div>
            </div>
          </button>
        ))}
      </div>
    </SettingsLayout>
  );
}
