import { Box, Group, Text } from "@mantine/core";
import { ArrowRight, Truck } from "lucide-react";
import { memo } from "react";
import { Link } from "react-router-dom";
import { cv } from "../constants";

interface HelloSectionProps {
  greeting: string;
  companyName: string;
}

export const HelloSection = memo(function HelloSection({
  greeting,
  companyName,
}: HelloSectionProps) {
  return (
    <Group justify="space-between" align="center" gap="md">
      <Box>
        <Text size="sm" c="edr-muted">
          {greeting}
        </Text>
        <Group gap={12} align="center" mt={2} wrap="wrap">
          <Text fz={26} fw={800} c="edr-text" className="tracking-tight">
            {companyName} 👋
          </Text>
        </Group>
      </Box>

      <Link to="/bookings/new">
        <Group
          gap={14}
          align="center"
          wrap="nowrap"
          bg="edr-green"
          px={18}
          py={14}
          className="w-full md:w-60! rounded-2xl no-underline shadow-[0_6px_10px_-12px_rgba(14,163,83,0.8)]"
        >
          <Truck size={22} color="#fff" />

          <Box className="min-w-0 flex-1">
            <Text fz={14} fw={700} c="white" lh={1.3}>
              Book a shipment
            </Text>
          </Box>
          <Box className="flex h-[32px] w-[32px] shrink-0 items-center justify-center rounded-full bg-white">
            <ArrowRight size={18} color={cv("edr-green.7")} />
          </Box>
        </Group>
      </Link>
    </Group>
  );
});
