← Назадimport { Target, Rocket, CheckCircle2, Circle, Activity, FolderOpen } from 'lucide-react';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../ui/card';
import { Button } from '../ui/button';
import { Badge } from '../ui/badge';
import { useProject } from '../../hooks/useProjects';
interface AffiliateCardProps {
onViewDetails: () => void;
onViewTasks: () => void;
onViewFiles?: () => void;
}
export function AffiliateCard({ onViewDetails, onViewTasks, onViewFiles }: AffiliateCardProps) {
const { data, isLoading, refetch } = useProject('affiliate');
if (isLoading) {
return <Card className="animate-pulse"><div className="h-64" /></Card>;
}
const { kpis, status } = data || {};
const phase = kpis?.phase || 'Подготовка';
const target = kpis?.target || '--';
const roadmap = kpis?.roadmap || [];
return (
<Card className="border-l-4 border-l-amber-500/50 transition-all duration-300 hover:-translate-y-1 hover:shadow-lg hover:shadow-affiliate/10">
<CardHeader>
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<div className="p-3 rounded-xl bg-affiliate/20">
<Target className="w-6 h-6 text-affiliate" />
</div>
<div>
<CardTitle>Traffic Arbitrage</CardTitle>
<CardDescription>CPA · Nutra/Crypto · PropellerAds</CardDescription>
</div>
</div>
<Badge variant="warning">
{status === 'planned' ? 'PLANNED' : status?.toUpperCase() || 'PLANNED'}
</Badge>
</div>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
<div className="flex items-center gap-2 text-xs text-gray-400 uppercase mb-2">
<Rocket className="w-4 h-4" />
Фаза
</div>
<div className="text-lg font-bold text-amber-400">{phase}</div>
</div>
<div className="bg-white/5 rounded-xl p-4 border border-white/5">
<div className="flex items-center gap-2 text-xs text-gray-400 uppercase mb-2">
<Target className="w-4 h-4" />
Цель
</div>
<div className="text-lg font-bold text-white">{target}</div>
</div>
</div>
{/* Roadmap checklist */}
{roadmap.length > 0 && (
<div className="space-y-2">
{roadmap.map((item: { step: string; done: boolean }, i: number) => (
<div key={i} className="flex items-center gap-2 text-sm">
{item.done ? (
<CheckCircle2 className="w-4 h-4 text-emerald-400 shrink-0" />
) : (
<Circle className="w-4 h-4 text-gray-500 shrink-0" />
)}
<span className={item.done ? 'text-gray-400 line-through' : 'text-gray-300'}>
{item.step}
</span>
</div>
))}
</div>
)}
</CardContent>
<CardFooter className="gap-2">
<Button variant="primary" size="sm" onClick={() => refetch()}>
<Activity className="w-4 h-4" />
Обновить
</Button>
<Button variant="ghost" size="sm" onClick={onViewDetails}>
Детали
</Button>
<Button variant="ghost" size="sm" onClick={onViewTasks}>
Задачи
</Button>
{onViewFiles && (
<Button variant="ghost" size="sm" onClick={onViewFiles}>
<FolderOpen className="w-4 h-4" />
Файлы
</Button>
)}
</CardFooter>
</Card>
);
}