import Button from '@/components/ui/Button.tsx';
import { Grid } from '@/components/ui/layout';
import { BarChart3, MapPin, Plus, Search } from 'lucide-react';

type Props = {
  onNavigate: (path: string) => void;
  t: (key: string) => string;
};

const QuickActionsSection = ({ onNavigate, t }: Props) => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>{t('dashboard.quickActions')}</CardTitle>
      </CardHeader>
      <CardContent>
        <Grid cols={{ sm: 2, md: 4 }} gap="md">
          <Button
            variant="outline"
            onClick={() => onNavigate('/resources')}
            className="h-20 flex flex-col items-center justify-center gap-2 hover:bg-primary/5"
          >
            <Plus className="h-6 w-6" />
            <span className="text-sm">{t('dashboard.createResourceFlow')}</span>
          </Button>

          <Button
            variant="outline"
            onClick={() => onNavigate('/matching')}
            className="h-20 flex flex-col items-center justify-center gap-2 hover:bg-primary/5"
          >
            <Search className="h-6 w-6" />
            <span className="text-sm">{t('dashboard.findMatches')}</span>
          </Button>

          <Button
            variant="outline"
            onClick={() => onNavigate('/map')}
            className="h-20 flex flex-col items-center justify-center gap-2 hover:bg-primary/5"
          >
            <MapPin className="h-6 w-6" />
            <span className="text-sm">{t('dashboard.exploreMap')}</span>
          </Button>

          <Button
            variant="outline"
            onClick={() => onNavigate('/analytics')}
            className="h-20 flex flex-col items-center justify-center gap-2 hover:bg-primary/5"
          >
            <BarChart3 className="h-6 w-6" />
            <span className="text-sm">{t('dashboard.viewAnalytics')}</span>
          </Button>
        </Grid>
      </CardContent>
    </Card>
  );
};

// reuse Card and Card subcomponents which we've referenced here
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card.tsx';

export default QuickActionsSection;